我正在渲染两个组件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

希望这可以帮助!

09-20 23:41