Делить данные между компонентами React без отношения?

Question

Я работаю над библиотекой компонентов React, которая позволяет фильтровать данные на стороне клиента, передавая массив объектов и <input/> в качестве реквизита для компонента <SearchFilter/>. Я хочу вернуть отфильтрованные результаты в отдельный компонент <SearchResults/>, который можно отобразить в другом месте дерева (т. Е. Компонент результатов не обязательно должен быть дочерним по отношению к компоненту ввода).

Я понял, что такое фильтрация, но я не уверен, что лучше всего использовать React для получения отфильтрованных данных в компонент <SearchResults/>.

Это то, что я хотел бы закончить ...

<SearchFilter
  data={data}
  input={<input type="text" value={value} onChange={this.handleChange}/>}
/>

Затем, используя Render Props для возврата данных и сопоставления с ним для возврата JSX, будет компонент результатов. Как то так ...

<SearchResults 
  render={data => (
    data.map(el => (
      <div>
       <span>{data.someProperty}</span>
      </div>
    )
  )}
/>

Это то, чего я хотел бы достичь, потому что я хочу разрешить рендеринг компонента <SearchFilter/> в одном месте дерева и разрешить визуализации компонента <SearchResults/> в другом месте , поэтому что существует максимальная гибкость в том, как составляется дерево и, следовательно, как отображается представление.

Я изучил Context API, но, похоже, для этого потребуется несколько дополнительных компонентов, чтобы стать частью моей библиотеки, что еще больше усложняет то, что я пытаюсь достичь. Если это единственный способ, то это нормально, но я хотел бы спросить и посмотреть, может ли кто-нибудь придумать другое решение.

Спасибо!

Answer 1

Вы можете создать класс хранилища данных, содержащий ваш фильтр, передать его как свойство обоим компонентам, и ваш компонент SearchFilter изменит в нем значение.

Answer 2

Большая проблема заключается в том, что вам нужно будет управлять состоянием, которое совместно используется компонентами на более высоком уровне, то есть любым компонентом, который в конечном итоге обернет эти два других компонента. В обычном React это состояние будет управляться родительским (или родительским) компонентом, передавая соответствующие значения как реквизиты. Это противоречит, как правило, плохой идее о том, чтобы братья и сестры влияли на состояние друг друга, поскольку вы хорошо разбираетесь в проблеме «кто здесь хозяин».

То, что обрабатывает Context API, - нет необходимости передавать реквизиты для вещей, которые обычно не меняются (или: как правило, не должны вызывать частые срабатывания визуализации).

Глобальное хранилище состояний, такое как Redux, может помочь вам смоделировать это, но по сути это не намного больше, чем состояние управления компонентом «a» и рендеринг других компонентов в соответствии с этим состоянием. События в нижних компонентах инициируют изменения в данных, что приведет к изменению состояния, что приведет к изменению реквизитов дочерних элементов, что затем приведет к повторным визуализациям.

Я бы посоветовал вам попробовать использовать этот простой шаблон:

class Search ... {
    state = {data: [], text: ""}

    render() {
        return (
            <div>
                <SearchFilter 
                    data={this.state.data} 
                    onSearch={() => this.fetchNewData()} 
                    onChange={(e) => this.setState({text: e.targetElement.value})}
                    text={this.state.text} 
                />
                <SearchResults data={this.state.data} />
            </div>
        );
    }

    fetchNewData() {
        fetch('/url?text=' + this.state.text)
            .then((newData) => { this.setState({data: newData}); })
    }
}

Что-то в этом роде. Если у вас есть проблемы с моделированием подобных вещей, вы можете использовать Redux, чтобы заставить вас делать это аналогичным образом, и избегать управления смешиванием локальных состояний с глобальным состоянием (которым обычно трудно управлять).

Если вы сделаете это правильно, компоненты, которые не имеют состояния (то есть не несут ответственности за управление состоянием и, следовательно, не имеют обработчиков событий), могут стать чистыми компонентами, то есть компонентами без состояния, то есть функциями, которые возвращают JSX на основе реквизитов:

const SearchResults = ({data}) => <div>{data.map( () => <etc /> )}</div>