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

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 返回未定义。

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)}
    />
  );
}

我还推荐 Dan Abromov 撰写的这篇关于 Smart & Dumb Components 的文章: https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.qq4cufc2c

希望这对您有所帮助!