在 react.js 中调用另一个组件进行渲染

Question

http://codepen.io/anon/pen/KNEzOX?editors=0010

我有组件 A 来获取和呈现列表。我有接受用户输入的组件 B。如何从组件 B 中触发组件 A？我猜我的结构是错误的。

const Profiles = React.createClass({
  getInitialState(){
    return {profiles: []}
    if(!this.props.username){
      return false;
    }
    fetch('https://api.github.com/search/users?q=' + this.props.username)
      .then(function(response) {
        return response.json()
      }).then(function(json) {
        this.setState({profile: json.items})
      })
  },
  render(){
    return (
      <ul>
        {
          this.state.profiles.map(profile => 
            <li key={profile.id}>profile.name</li>
          )
        }
      </ul>
    )
  }
})

const Input = React.createClass({
    getInitialState(){
      return {username:''}
    },
    handleInputChange(e){
      this.setState({username:e.target.value})
    },
    handleSearch(){
      if(!this.state.username){
        alert('username cannot be empty');
        return false;
      }
      //call profile component and pass username to it?
    },
    render() {
        return(
          <div>
            <input type="text" placeholder="github username" onChange={this.handleInputChange} value={this.state.username} />
            <button onClick={this.handleSearch}>Search</button>
            <Profiles username={this.state.username} />
          </div>
        )
    }
});

Answer 1

首先：

getInitialState(){
    return {profiles: []}
    if(!this.props.username){
      return false;
    }
    fetch('https://api.github.com/search/users?q=' + this.props.username)

由于返回，Fetch 永远不会在这里执行。把return放在最后。

其次，你需要在组件接收到新的 props 时获取它。我要做的是向将要获取的类添加一个新方法，并从getInitialState 和componentWillReceiveProps 调用它。所以：

  getInitialState(){
    if(!this.props.username){
      return false;
    }
    this._fetchData();
    return {profiles: []}
  },
  componentWillReceiveProps(){
    this._fetchData();
  },
  _fetchData(){
    fetch('https://api.github.com/search/users?q=' + this.props.username)
      .then(function(response) {
        return response.json()
      }).then(function(json) {
        this.setState({profile: json.items})
      })
  },

问题是组件已经存在，所以getInitialState 不会被调用。它只需要自我更新。