我是 React 的初学者，使用 Webpack 构建 bundle.js 并显示。
我需要提供一些搜索表单，并相应地在搜索表单下方显示结果。因此，为了对其进行模块化，我创建了一个包含搜索和结果视图组件的父组件。
现在我已经设计了一个表单并编写了表单 onSubmit 事件处理程序，我应该如何继续在结果组件中呈现 API 结果（现在是虚拟 json）。我附上一张我的意图的简短图片供您参考。
【问题讨论】：
标签： javascript reactjs
这是我基于上述 cmets 的解决方案：https://codesandbox.io/s/q85oq0w10q
创建一个HOC 来保存您的应用程序的状态，然后您的两个孩子仅用于渲染目的，可以做成纯函数
import React from 'react';
import { render } from 'react-dom';
const Result = ({results}) => {
return results.map((r, i) => <div key={i}>{r}</div>);
}
const Search = (props) => {
const {
searchQuery,
onChange,
search
} = props;
return <div>
<input
type="text"
value={searchQuery}
onChange={onChange}
/>
<button onClick={search}>Search</button>
</div>;
}
class Container extends React.Component {
constructor(props) {
super(props);
this.state = {
searchQuery: '',
results: []
}
this.onSearchQueryChange = this.onSearchQueryChange.bind(this);
this.onSearch = this.onSearch.bind(this);
}
onSearchQueryChange(e) {
this.setState({searchQuery: e.target.value});
}
onSearch() {
// Simulate AJAX call
setTimeout(() => {
this.setState({results: [0, 1, 2, 3, 4]});
}, 1000)
}
render() {
const {results, searchQuery} = this.state;
return <div>
<Search
searchQuery={searchQuery}
onChange={this.onSearchQueryChange}
search={this.onSearch}
/>
<Result results={results} />
</div>;
}
}
【讨论】：
我相信这就是您正在寻找的。工作示例fiddle
因此，我们的想法是将结果保存在 Container 组件中，并将其传递给 Result 组件。此外，Container 组件应该将一个回调函数传递给您的 Search 组件，它会被来自 Search 组件的 API 结果触发。
您可能还想看看Redux。这是一个用于管理应用状态的库。使用Redux 可以以更简单的方式实现。
希望对你有所帮助。
【讨论】：
我认为如果你是 React 新手。你应该先学习使用 React。因为我看到很多人使用 Redux（或任何其他应用程序状态处理程序）作为任何数据的存储。
您的案例实际上是学习两个基本思想的很好例子：if children need similar thing, parents should handle it 和params go down and callbacks go up。
所以你所有的逻辑都必须在容器组件中，回调http请求函数，在解析响应后更新状态（setState）并发送到搜索组件。 onSubmit 调用该回调，并将数据发送到结果组件。
所以你不需要额外的库（也许是 http 请求）。 1 类组件（Container Component）。 2 可能是无状态的功能组件（搜索组件和结果组件）。
【讨论】：