ReactJsコンポーネントからコンポーネントへの引数の受け渡し

Question

私はまだReactJを学習しており、問題が発生しました。ヘッダーコンテンツとフッターを異なるコンポーネントとしてレンダリングしました。ユーザーがコンテンツのComponentDidMountにログインすると、彼の名前、姓などでJsonを取得します。そして、データを受け取ったとき、ようこそのようなヘッダーにユーザー名を追加したいと考えています。username。しかし、私はそれを渡す方法を知らないので、コンポーネントのヘッダーがその名前を取得するようになります。

インデックス

render: function() { 

if(this.state.signup == true) { 
    return (
    <div> 
    <Header data = {this.state.signup} logout={this.logOut}/> 
    <MenuBar/> 
     <Content/> 
    <Footer/> 
    </div> 
); 
} else { 
    return (
    <div> 
    <Header data = {this.state.signup}/> 
    <MenuBar/> 
     <Login func={this.logIn}/> 
     <Footer/> 
    </div> 
); 
} 
}, 

したがって、ユーザーは、真の状態の変化にログインしている場合。それがContentを開きます。ここ 私は、ユーザデータ

コンテンツ

componentDidMount: function() { 
document.title = "Dashboard"; 
this.getUser(); 

}, 

getUser: function(){ 
$.getJSON(url, this.handleData); 
}, 

handleData: function(data){ 
this.setState({data: data}); 
}, 

そして、この問題が発生したときに、今私は、歓迎とJSONからName of the userをヘッダーを変更したいを取得します。

ヘッダー

render() { 
if(this.props.data) //Check if user is logged in 
{ 
    return (
    <section className="heading"> 
      <div className="user-message">Welcome, User</div> //Here i would like to change user name from Json   
    </section> 
); 

} 
else{ 
    return (
     <section className="heading"> 
      <div className="user-message">You are not connected</div> 
     </section> 
); 

私は完全に私が間違った方向に行ってきましたかもしれないReactJsを理解している場合、私は知りません。

どのように名前を変更する必要がありますか？私はヘッダーをコンテンツに移動することを考え、そこから渡しましたが、より良い方法がありますか？代わりに、他の場合でreturn文の

Answer 1

、私はUserMessage

class UserMessage extends Component{ 
    render(){ 
    return <div className="user-message">{this.props.message}</div> 
    } 
} 

と呼ばれる新しいコンポーネントを作成することをお勧めしますとヘッダー、

{ 
this.props.data?<UserMessage message={this.props.data.message}/>:<UserMessage message="You are not connected"/> 
} 

に私がどこ同様のユースケースでこれを使用していますデータが利用できないときは、loadBarを表示する必要があります。

おかげであなたは何ができるか

Answer 2

は、各コンポーネントのcomponentDidMountのディスパッチャを登録し、ユーザーがログインしたとき、あなたのUSERSTOREがイベントを発しなければならない、とあなたのコンポーネントがちょうどそこに状態がユーザーを置く更新する必要があります記録されます。