如何在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 => <div>{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>;
  }
}

Answer 2

我相信这就是你要找的东西。工作示例fiddle

因此，我们的想法是将结果保存在Container组件中并将其传递给Result组件。此外，Container组件应将回调函数传递给您的Search组件，并使用Search组件的API结果触发该组件。

另外，您可能需要查看Redux。这是一个用于管理应用状态的库。使用Redux，可以更简单的方式实现。

希望它会对你有所帮助。

Answer 3

在我看来，如果你是React的新手。您应该首先学习使用React。因为我看到很多人使用Redux（或任何其他应用程序状态处理程序）作为任何数据的存储。

您的案例实际上是学习两个基本想法的好例子：if children need similar thing, parents should handle it和params go down and callbacks go up。

所以你的所有逻辑都必须在Container Component中，回调http请求函数，在解析响应后发送状态更新（setState）并发送到Search Component。 onSubmit调用该回调，并将数据发送到Result Component。

所以你不需要额外的库（可能是http请求）。 1类组件（容器组件）。 2可能是无状态功能组件（搜索组件和结果组件）。