React.js：根據傳遞的id不同地呈現相同的組件

Question

我正在使用react，有一個名為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>
    );
  }
});

route.jsx：

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

Answer 1

您需要做的就是從Route中獲取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();
  }
}