如何渲染React中另一个组件的搜索结果？

Z时代
2024-01-10
分类：问答

我是React的初学者，使用Webpack构建bundle.js并显示。如何渲染React中另一个组件的搜索结果？

我的需求是提供一些搜索表单，并在搜索表单下面显示结果。所以，为了模块化，我创建了一个包含搜索和结果视图组件的父组件。

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

回答：

这是基于我上面的评论我的解决方案：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>; 
    } 
}

回答：

我相信这是你在找什么。工作示例fiddle

所以这个想法是保持您的结果在Container组件并将其传递给Result组件。另外Container组件应该将回调函数传递给您的Search组件，并且它将通过Search组件的API结果触发。您也可以看看Redux。这是一个管理你的应用程序状态的库。用Redux它可以以更简单的方式实现。

希望它能帮助你。