ReactJs 구성 요소에서 구성 요소로 인수를 전달하십시오.

Question

아직 ReactJ를 배우고 있으며 문제가 발생했습니다. Header Content와 Footer를 다른 구성 요소로 렌더링했습니다. 그리고 사용자가 Content의 ComponentDidMount에 로그인 할 때 나는 그의 이름, 성 등으로 Json을 얻습니다. 그리고 데이터를 받으면 Welcome와 같은 헤더에 사용자 이름을 추가하고 싶습니다. username. 그러나 나는 그것을 전달하는 법을 모른다. 또는 어디에서 구성 요소 Header가 이름을 얻는가. 사용자가 true로 상태 변경에 기록됩니다 그래서 경우

지수

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

. 그러면 콘텐츠가 열립니다. 여기에 나는 유저 데이터

내용을 얻을

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을 이해하면 내가 잘 모릅니다.

그래서 어떻게 이름을 변경해야합니까? 나는 내용으로 헤더를 옮기는 것에 대해 생각하고 거기에서 패스했지만, 더 좋은 방법이 있습니까? 다른 경우에 나는 유사한 사용의 경우 어디에서 이것을 사용하고

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

Answer 1

대신 return 문, 나는,

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

그리고 헤더에 UserMessage

라는 새로운 구성 요소를 만들 제안합니다 데이터를 사용할 수없는 경우 loadBar를 표시해야합니다.

감사

Answer 2

당신이 할 수있는 것은 각 구성 요소에 대해 componentDidMount에 디스패처를 등록하고, 사용자가 로그인 한 경우, 귀하의 userStore 이벤트를 방출해야하고 구성 요소가 바로이 상태를 사용자에게 퍼팅을 업데이트해야 기록.