在没有Redux的同级之间传递数据

Question

考虑以下组件树

<Header />
 <SearchBar />
<ProductList />
 <Product />

在SearchBar组件中，我想捕获输入值并将该值发送到ProductList以根据接收到的值动态呈现Product组件。

是否有一种方法可以在SearchBar和ProductList之间进行通信，而无需包装它们的组件或不需要Redux？

Answer 1

根据React的页面“反应就是所有有关组件层次结构的单向数据流”，这意味着应该避免水平传递数据。

在您的情况下，您可以有一个基于状态呈现<SearchBar/>和<ProductList/>的父组件。例如，每当用户使用<SearchBar>中的值输入时，它都会更改父组件的状态，因此<ProductList>将再次呈现。

Answer 2

如奥斯曼所说，您可以将SearchBar的值传递给状态，然后使用函数将其从状态传递给产品。

z-index

确保不要忘记在构造函数中绑定函数。