在React组件之间共享数据没有关系？

Question

我正在研究一个React组件库，它允许通过将一个对象数组和一个<input/>作为props传递给<SearchFilter/>组件来进行客户端数据过滤。我想将过滤后的结果返回到单独的<SearchResults/>组件，该组件可以在树中的其他位置呈现（即结果组件不必是输入组件的子组件）。

我已经找到了过滤，但我不确定将Rehed用于获取过滤数据到<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

更大的问题是，您需要管理更高级别的组件之间共享的状态，即最终将包装这两个其他组件的任何组件。使用简单的React，此状态将由父（或祖先）组件管理，将相关值作为props传递。这与通常不好的想法相反，让兄弟姐妹成分影响彼此的状态，因为你很好地进入了“谁在这里的老板” - 问题。

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强制您以类似的方式执行此操作，并避免使用全局状态管理本地状态混合（这通常是难以管理的事情）。

如果你这样做，没有状态的组件（即，不负责管理状态，因此没有事件处理程序）都可以成为纯组件，即无状态组件，即基于props返回JSX的函数：

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

Answer 2

您可以创建一个包含过滤器的数据存储类，将其作为属性传递给两个组件，并让SearchFilter组件更改其中的值。