Ответы пользователя по тегу React
  • React. Ленивая загрузка компонента только при его использовании?

    xakplant
    @xakplant
    Автор сайта xakplant.ru
    Во есть пример с react-router.
    Так например работает сайт https://tools.xakplant.ru/
    Ответ написан
    Комментировать
  • Как сделать фильтр с несколькими параметрами в react redux?

    xakplant
    @xakplant
    Автор сайта xakplant.ru
    Я так понял вам нужно фильтровать элементы списка.
    Если вы храните данные локально то можно пойти двумя путями:
    1. Хранить в store два экемпляра фильтра. Превый полный, второй отфильтрованный.
    Тогда вы в компонет передаёте только отфильтрованный список.
    Вам нужен будет нужен redux-thunk (немного о нём) (или redux-saga). Создайте action creator.
    Например с redux-thunk
    // signObj - данные для фильтрации
    /*
    signObj = {
    	model: 'audi',
    	year: '2007',
    	type: "benzin"
    }
    */
    const filterAction = (signObj) => {
    	return (dispatch, getState)=>{
    		let filtredList = [ ...getState().noFilterList]; // Не фильтрованный список
    		Object.keys(signObj).map((signName)=>{
    			filtredList.filter((item)=>( item[signName] ===  signObj[signName]))
    		});
    		dispatch({ type: SET_FILTRED_LIST, payload: filtredList});  // устанавливает state.filterdList
    	}
    }
    
    // Можно собирать signObj предварительно в store


    2-й вариант. Получать польный список и список полей со значением в самом компонете и делать последовательно фильтрацию уже там
    Ответ написан
    Комментировать
  • Зачем нужен redux-thunk?

    xakplant
    @xakplant
    Автор сайта xakplant.ru
    Действительно, скорее всего это про организацию кода.
    Если мы делаем наше react-приложение возможно, что однажды нам придётся изменить хранилище. Вообще дурной тон использовать dispatch в самом компоненте не обернув его в HOC. Ведь это сразу делает невозможным переиспользование. Например у нас есть компонент, который рендерит какой-то список и использует redux. Для того, чтобы мы могли его переиспользовать правильно сделать так:

    import React, { Component } import 'react';
    import List from './List'; // Список
    import { connect } from 'react-redux'
    import { mutatinList } from './actions'; // Какой-то action
    
    class ListContainer extends Component{
    	render(){
    		return(
    			<List {...this.props} />
    		)
    	}
    }
    
    const mapStateToProps = (state) => ({
        list: state.list
    })
    
    const mapDispatchToProps = {
    	mutatinList: mutatinList
    }
    
    export default connect(mapStateToProps, mapDispatchToProps)(ListContainer);


    Если мы захотим переиспользовать наш спискок то нам не придётся переписывать сам компонент, а можем лишь написать новый HOC

    Ещё по этой теме я написал небольшую статью
    Ответ написан
    Комментировать
  • Как в React сделать прелоадер при загрузке большой фоновой картинки?

    xakplant
    @xakplant
    Автор сайта xakplant.ru
    Вот тут коротко описано. Вот ссылка "Анимированный preloader на ReactJS. "
    Ответ написан
    Комментировать
  • Как реализовать redirect в react?

    xakplant
    @xakplant
    Автор сайта xakplant.ru
    Черех history.push('/home');
    Подробно в статье "Использование истории браузера и функция редирект...
    Ответ написан
    Комментировать
  • React-Router v4 & Redux?

    xakplant
    @xakplant
    Автор сайта xakplant.ru
    Вот есть ещё примеры react-router и redux
    Ответ написан
    Комментировать
  • Как решить проблему с блокировкой CORS?

    xakplant
    @xakplant
    Автор сайта xakplant.ru
    Есть статья "Fetch и CORS. Пример на ReactJS"

    Вам кажется не хватает заголовков в ОТВЕТЕ
    Access-Control-Allow-Origin: https://foo.invalid // Домен с которого идут запросы
    Access-Control-Allow-Credentials: true
    Access-Control-Allow-Headers: "заголовки которые можно отправить на удалённый сервер" 
    // Разрешённые методы
    Access-Control-Allow-Methods: POST, GET, PUT, DELETE, OPTIONS
    Ответ написан
    Комментировать
  • Как правильно делать fetch в react?

    xakplant
    @xakplant
    Автор сайта xakplant.ru
    Ну или так

    import React, { Component } from 'react';
    
    class Succes extends Component{
        constructor(props){
            super(props);
            this.state = { error: null,
                isLoaded: false,
                items: Array
            }
        }
    
    
    
        componentDidMount() {
            // Fetch тут
            fetch("http://example.url/page.php")
                .then((response) => response.json())
                .then((response) => {
                        this.setState({items: response});
                        this.setState({isLoaded: true});
                })
                .then((error) => {
                    this.setState({false: true});
                    this.setState({error});
                })
    
    
        }
    
    
    
        render (){
            const data = Array.from(this.state.data.headers);
    
        }
    
    }
    
    export default Succes;


    Ну подробно можете прочитать тут
    Ответ написан
    Комментировать
  • Плагин на React.js - сколько всего нужно устанавливать?

    xakplant
    @xakplant
    Автор сайта xakplant.ru
    Вообще можно загружать скрипт в событии.
    Например вам нужно загрузить реакт и реакт дом только на страницах, где подключен шорткод. Тогда вы делаете следующие:
    1. На init wp регистрируете скрипт реакта и реакт дом и может быть бабель.
    function react_enquip_script(){
       // Регистрируете скрипты в WP
    }

    2. Создаёте событие загрузки реакта, через "вешанье" хука)
    add_action('react_enquip_script', 'react_enquip_script');

    3. Создаёте шотркод (это для примера)
    add_shortcode('component_chat', 'component_chat');
    function component_chat(){
       do_action('react_enquip_script');
       // Прочий код, в том числе подключение компонента
    }


    Напомню, что все скрипты должны быть загружены в папку с плагином
    Ответ написан
    2 комментария