我正在渲染两个组件SearchForm和LatestSearch
var SearchFormContainer = React.createClass({
render: function() {
return (
<div>
<SearchForm />
<RecentSearch />
</div>
);;
}
});
SearchForm中有一个状态。基于状态,我想渲染最近搜索组件。如何检查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重定义未定义。
最佳答案
将状态保存在您的父容器(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)}
/>
);
}
我也推荐Dan Abromov撰写的有关Smart&Dumb Components的文章:
https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.qq4cufc2c
希望这可以帮助!