React.js：渡されたIDに基づいて同じコンポーネントを異なる方法でレンダリング

Question

私は反応を使用しています。私はNaturalPersonというコンポーネントを持っていて、ナビゲーションコンポーネントでこのコンポーネントを使用しています。私は渡されたIDに基づいて別の方法で同じコンポーネント（NaturalPerson）をレンダリングしたい。これを行う方法はありますか？

NaturalPerson：

module.exports = React.createClass({ 

    getInitialState :function() { 
    return{ 
      readOnly : true 

      }; 
      }, 

      submit : function(){ 
      this.setState({readOnly : false}); 
      }, 
      save : function(){ 
      return '/'; 
      }, 

     render: function render() { 

     return (<div id="container_suspects"> 
     <button type="button" onClick={this.submit} >Edit Details</button> 
     <div id="suspects_personal_details"><PD hidden="hidden" readOnly={this.state.readOnly}/><br/><br/> 
     <PNS hidden="hidden" readOnly={this.state.readOnly}/><br/><br/> 
     <Email readOnly={this.state.readOnly} /><br/><br/></div> 
     <div id="suspects_address"><A readOnly={this.state.readOnly}/><br/><br/></div> 
     </div> 

     ); 
     } 
}); 

nav.jsx：

module.exports = React.createClass({ 

    displayName: 'nav', 

    render: function render() { 
    var activeClass = 'left-nav-selected'; 

    return (
     <section className='left-nav' id='left-nav'> 
     <div className='left-nav-title'>{this.props.name}</div> 
     <nav className='left-nav-links'> 
      <ul> 
      <li className='left-nav-link' id='nav-section1'> 
       <Link to={this.props.section1} params={{naturalPersonId: 1}} className={this.props.navSelection==='nav-section1'?activeClass:''} 
        activeClassName={activeClass}>{this.props.nav1}</Link> 
      </li> 
      <li className='left-nav-link' id='nav-section2'> 
       <Link to={this.props.section2} params={{naturalPersonId: 2}} className={this.props.navSelection==='nav-section2'?activeClass:''} 
        activeClassName={activeClass}>{this.props.nav2}</Link> 
      </li> 
      <li className='left-nav-link' id='nav-section3'> 
       <Link to={this.props.section3} params={{naturalPersonId: 3}} className={this.props.navSelection==='nav-section3'?activeClass:''} 
        activeClassName={activeClass}>{this.props.nav3}</Link> 
      </li> 
      <li className='left-nav-link' id='nav-section4'> 
       <Link to={this.props.section4} params={{naturalPersonId: 4}} className={this.props.navSelection==='nav-section4'?activeClass:''} 
        activeClassName={activeClass}>{this.props.nav4}</Link> 
      </li>  
      </ul> 
     </nav> 
     </section> 
    ); 
    } 
}); 

がroutes.jsx：

<Route name='NaturalPerson' path='NaturalPerson/:naturalPersonId' handler={NaturalPerson}/> 

Answer 1

あなたがする必要があるすべてはあなたのルートからnaturalPersonIdを取得し、追加することですあなたが得ている入力に応じて条件付きです。ここではそれを行う一つの方法です：内

render: function render() { 
    let id = this.props.routeParams.naturalPersonId; 
    return (
    //JSX goes here... 
); 
} 

代わりに、あなたが条件付を行うことができあなたのレンダリングし、それに応じて異なる機能を呼び出す：

render: function render() { 
    let id = this.props.routeParams.naturalPersonId; 
    if(id == 1) { 
    return this.customRenderOne(); 
    } else { 
    return this.customRenderTwo(); 
    } 
}