如何檢查渲染函數中的子組件的狀態？

Question

我使兩個組件SearchForm和RecentSearch像

var SearchFormContainer = React.createClass({ 
    render: function() { 
    return (
     <div> 
     <SearchForm /> 
     <RecentSearch /> 
     </div>  
    );; 
    } 
}); 

有一個在SearchForm的狀態。基於我想呈現RecentSearch組件的狀態。我如何檢查SearchFrom的狀態？我試過的是：

var SearchFormContainer = React.createClass({ 
    render: function() { 
    return (
     <div> 
     <SearchForm ref="search_form"/> 
     {this.refs.search_form.state ? <RecentSearch /> : null} 
     </div> 
    ); 
    } 
}); 

this.refs.search_form.state returing undefined。

Answer 1

將狀態保存在您的父容器中（SearchFormContainer）。更新此狀態，例如通過一個回調函數，你傳遞給你的SearchForm。事情是這樣的：

const Container = React.createClass({ 
    onSearch(value) { 
    this.setState({search: value}); 
    } 
    render() { 
    <div> 
     <SearchForm onSearch={this.onSearch} /> 
     <RecentSearch recentValue={this.state.search} /> 
    </div> 
    } 
}); 

const SearchForm = ({onSearch}) => { 
    return (
    <input 
     type="search" 
     onChange={event => onSearch(event.target.value)} 
    /> 
); 
} 

此外，我建議這篇文章丹Abromov有關智能&阿呆組件： https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.qq4cufc2c

希望這有助於！

Answer 2

React狀態是一個組件級別的概念，並且從上到下通過將子項傳遞給子組件，而不是其他方式。

如果你想渲染的基礎上SearchForm狀態的RecentSearch組件，你可以任一狀態的一個額外層添加到您的SearchFormContainer組件基本保持的SearchForm提交的軌道，並基於該有條件地呈現RecentSearch。

var SearchFormContainer = React.createClass({ 

    getInitialState: function() { 
    return { userHasSearched: false } 
    }, 

    onSearchSubmit: function() { 
    this.setState({ userHasSearched: true }); 
    }, 

    render: function() { 
    return (
     <div> 
     //Pass submit handler down to the SearchForm component 
     <SearchForm onSubmit={this.onSearchSubmit} /> 
     {this.state.userHasSearched ? <RecentSearch /> : null} 
     </div> 
    ); 
    } 
}); 

甚至更​​好，移除[引入（除非你有SearchFormContainer未來特定意圖）額外的複雜性，並且只返回你的<RecentSearch />組件有條件的<SearchForm />，你的狀態實際上是位於時刻之間。