コンポーネント

Question

兄弟の呼び出し、私は次のHTML構造を有する：私は、ウェブサイトの負荷にContentコンポーネントのロード

を：

ReactDOM.render(React.createElement(Content), document.getElementById('content')); 

をこのコンポーネントの内部で、私は、ナビゲーションのdivの中に別のコンポーネントを配置しますいくつかの小道具では、次のようになります：

var Content = React.createClass({ 

    getInitialState: function() { 
     return { 
      isUserSignedIn: this.isUserSignedIn(), 
      role: undefined 
     }; 
    }, 

    isUserSignedIn: function() { 
     return UserService.isSignedIn(); 
    }, 

    setIsUserSignedIn: function() { 
     this.setState({ 
      isUserSignedIn: this.isUserSignedIn() 
     }); 
    }, 

    render: function() { 
     if (this.state.isUserSignedIn === false) { 
      return React.createElement(UserSignIn, {setIsUserSignedIn: this.setIsUserSignedIn}); 
     } else { 
      if (this.state.role !== undefined) { 
       ReactDOM.render(
        React.createElement(Navigation), 
        {role: this.state.role}, 
        document.getElementById('navigation') 
       ); 
      } 
      return React.createElement('div', {}, ''); 
     } 
    } 

}); 

このように私はReactDOM.renderメソッド（roleが未定義でないとき）の中で小道具を使うことができないというエラーを私に投げます。私はどうしたらいい？あなたの初期状態では

Answer 1

は、ちょうどあなたのレンダリング（）関数は、（代わりにReact.createElementの）コンポーネントを作成するためにJSXを使用する必要があります

isUserSignedIn: false 

を設定します。これらのコンポーネントは、子コンポーネントに親からsetIsUserSignedIn funcを渡している例

var Navigation = require('./Navigation'); 

のために、彼らのJSファイルを参照して、あなたの親コンポーネントに含まれる必要があります。あなたのコードから明らかではない

UserService.isSignedIn() 

が定義され呼び出されます。

render: function() { 
    if (this.state.isUserSignedIn === false) { 
     return (<UserSignIn setIsUserSignedIn={this.setIsUserSignedIn} />); 
    } else { 
     if (this.state.role !== undefined) { 
      return(<div id="navigation"> 
         <Navigation role={this.state.role}/> 
        </div> 
     } else 
      return (<div></div>) 
     } 
    } 
}