如何检查渲染函数中的子组件的状态？

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 />，你的状态实际上是位于时刻之间。