我正在开发一个 React 组件库，它允许通过将对象数组和<input/>作为 props 传递给<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/>组件，以便在树的组成方式以及视图的呈现方式方面具有最大的灵活性。
我已经研究了上下文API，但这似乎需要更多的组件才能成为我的库的一部分，这进一步使我想要实现的目标复杂化。如果这是唯一的解决方法，那很好，但我想问一下，看看是否有人能想到另一种解决方案。
谢谢！
更大的问题是，您需要在更高级别上管理组件之间共享的状态，即最终将包装其他两个组件的任何组件。使用普通 React，此状态将由父(或祖先(组件管理，将相关值作为 props 传递。这与让兄弟姐妹组件影响彼此状态的想法相反，因为你会陷入"谁是这里的老板"问题。
上下文 API 处理的事情不必为通常不会更改的内容传递 props(或者：通常不应该导致渲染经常触发(。
全局状态存储(如 Redux(可以帮助您对此进行建模，但本质上它只不过是管理状态的"一个"组件，以及根据该状态呈现的其他组件。下部组件中的事件会触发数据更改，这将导致状态更改，这将导致子项的 props 更改，从而导致重新渲染。
我建议您尝试使用这种简单的模式：
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>
您可以创建一个保存筛选器的数据存储类，将其作为属性传递给两个组件，并让 SearchFilter 组件更改其中的值。