如何渲染React中另一個組件的搜索結果？

我是React的初學者，使用Webpack構建bundle.js並顯示。如何渲染React中另一個組件的搜索結果？

我的需求是提供一些搜索表單，並在搜索表單下面顯示結果。所以，爲了模塊化，我創建了一個包含搜索和結果視圖組件的父組件。

現在我已經設計了一個窗體和書面窗體onSubmit事件處理程序，我應該如何繼續在結果組件中呈現API結果（現在是虛擬json）。我附上我的意圖簡要照片供您參考。

來源

2017-12-18 xploreraj

API調用和結果需要存儲在你的容器組件中，然後你只需將它們作爲道具傳遞下去 – klugjo

就像我剛剛開始的那樣，所以我只是試圖做大部分基本的React事情。如果需要一旦這個應用程序的基本準備就緒，我可能會添加REDX或其他東西。但現在，這將是頭頂上：D – xploreraj

@ klugjo我明白了一點點，你可以詳細說一點，就像怎麼做？數據將成爲一個大對象，例如交易詳情列表。 – xploreraj

這是基於我上面的評論我的解決方案：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>; 
    } 
}

來源

2017-12-18 10:18:25 klugjo

有幫助。它與@The Reason的答案相同。 – xploreraj

我的答案是不同的。只有父組件進行Ajax調用並有一個狀態。這是正確的模式 – klugjo

噢好吧。但你爲什麼說它的正確模式？ – xploreraj

我相信這是你在找什麼。工作示例fiddle

所以這個想法是保持您的結果在Container組件並將其傳遞給Result組件。另外Container組件應該將回調函數傳遞給您的Search組件，並且它將通過Search組件的API結果觸發。您也可以看看Redux。這是一個管理你的應用程序狀態的庫。用Redux它可以以更簡單的方式實現。

希望它能幫助你。

來源

2017-12-18 09:41:41

是的，它的幫助。 – xploreraj

在我看來，如果你是新的React。你應該先學習使用React。因爲我發現很多人使用Redux（或任何其他應用程序狀態處理程序）作爲任何數據的存儲。

你的情況實際上是學習兩個基本思想的好例子：if children need similar thing, parents should handle it和params go down and callbacks go up。

所以你所有的邏輯必須在容器組件中，在解析響應併發送到搜索組件之後，使用狀態更新（setState）進行http請求函數的回調。 onSubmit調用該回調函數，並將數據發送給Result Component。

所以你不需要額外的庫（也許用於http請求）。 1類組件（容器組件）。 2可能是無狀態的功能組件（搜索組件&結果組件）。

來源

2017-12-18 12:17:00

同意。從這裏的答案來看，它歸結爲一個通過傳遞道具來管理搜索和結果的容器。 – xploreraj

如何渲染React中另一個組件的搜索結果？

回答

相關問題