如何在 React 的另一个组件中呈现搜索结果？

Question

我是 React 的初学者，正在使用 Webpack 构建 bundle.js 并显示。

我需要提供一些搜索表单，并相应地在搜索表单下方显示结果。因此，为了模块化它，我创建了一个包含搜索和结果视图组件的父组件。

现在我已经设计了一个表单并编写了表单 onSubmit 事件处理程序，我应该如何继续在结果组件中呈现 API 结果（现在是虚拟 json）。我附上我的意图的简要图片供您参考。

Answer 1

这是我根据上述评论的解决方案：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>;
  }
}