在父母或孩子的組件中的反應狀態

我正在使用React進行一個typeahead輸入，並且想要在哪裏放置我的狀態。我只使用反應，而不是一些建築像終極版或者你我的根組件，你有什麼看起來是這樣的：在父母或孩子的組件中的反應狀態

import React, { Component } from 'react'; 
import InputSearch from './input_search'; 
import SearchHints from './search_hints'; 

class Main extends Component { 
    constructor(props) { 
    super(props) 
    this.state = 
     /* Some state here? */ 
    } 
    } 

    render() { 
    return (
     <InputSearch /> 
     <SearchHints /> 
    ); 
    } 
}

的InputSearch顯然採取<input />標記的關懷和SearchHints需要渲染列表的護理的建議，用戶類型

我的問題是我是否應該把我的狀態在根組件，或將其放置在不同的子組件狀態將包含邏輯用戶輸入匹配的一些數據陣列搜索建議以及更新值f的邏輯從選定的搜索提示到輸入字段。我覺得兩個孩子組件之間的邏輯是混合在一起的，這就是爲什麼我不確定在哪裏放置它。

來源

2017-08-10 frisk0

您應該始終將您的狀態保持在根組件中，因爲您的應用程序的流程是圍繞您的根組件進行的。因此，您應該相應地規劃組件。

如果您覺得以root身份維護應用程序的狀態很困難，並且您的子組件也需要維護某些本地狀態，那麼您應該使用存儲（flux，redux）。

現在看看你的問題陳述，保持你的狀態爲root，這將是一個簡單的解決方案，因爲你可以將你的狀態傳遞給子組件，並在子組件中執行任何計算。對於每個子組件，維護不同的狀態讓你的代碼更復雜。

要做到這一點，只要將狀態就像在你inputsearch分量的東西

{input:""}

你可以做

function:method(event) 
{ 

this.props.setInput(event) 


} 
<input type="text" onChange={this.setInput}/>

在你的主根組件

function:setInputAsState(input) 
{ 
this.setState({ 


input:input 
]) 

} 
<inputsearch setInput={this.setInputAsState}/> 
<SearchHints state={this.state.input}/>

現在計算任何你需要在SearchHints組件中。希望你有個想法

來源

2017-08-10 16:42:08

只是我正在尋找的答案。謝謝！所以基本上使用事件將數據傳回給根組件，然後將它作爲道具傳遞給另一個子組件？ – frisk0

是的，根據我的知識，因爲我這樣做只是:)仍然繼續尋找更好的想法:) –

這實際上也是我覺得是最好的解決方案，但總是很高興得到第二個意見:) – frisk0

我會保留在你的根組件中，用戶已經輸入了什麼，並顯示最後的建議數據。我也會把這些國家的成員交給孩子們。

我會去像這樣的東西：

this.state = { 
    text: "", 
} 

... 

<InputSearch value={this.state.text} /> 

// 1st case: 
<SearchHints query={this.state.text} /> 

// 2nd case: 
<SearchHints hints={arrayOfSuggestions} /> 

// 3rd case: 
<SearchHints> 
    <Hint someProps /> 
    <Hint someProps /> 
    <Hint someProps /> 
</SearchHints>

在第一種情況下，你的元素SearchHints查找的建議。

否則，您必須爲其提供一組道具或一組兒童的建議。

來源

2017-08-10 16:36:38 lilezek

在父母或孩子的組件中的反應狀態

回答

相關問題