如何在渲染功能中检查子组件的状态？

Question

我正在渲染两个组件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重定义未定义。

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

希望这可以帮助！

Answer 2

在React状态下是一个组件级别的概念，并且从上到下通过将prop传递给子组件而起作用，而实际上并不是相反。

如果要基于SearchForm的状态来呈现“ RecentSearch组件，则可以在SearchFormContainer组件中添加一个额外的状态层，该状态基本上可以跟踪SearchForm提交，并有条件RecentSearch基于该状态呈现“ 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有特定的未来意图），只需在<SearchForm />内部有条件地返回您的<RecentSearch />组件，此时您的状态实际上就位于此位置。