調用另一個組件在react.js呈現

Question

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

我有一個組件，它的獲取和呈現的清單。我有組件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) 

取永遠不會在這裏執行，因爲回報。把回報放在最後。

其次，您需要的是在組件接收新道具時獲取。我會做的是添加一個新的方法，將獲取的類，並從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不會被調用。它只需要更新自己。