React.js：将道具传递给反应路由器链接组件答案

【问题标题】：React.js : passing props to a react router linked componentReact.js：将道具传递给反应路由器链接组件
【发布时间】：2016-04-28 07:11:23
【问题描述】：

我想通过 react-router 将组件中的 props 传递给子组件。我的流程是这样的： NaturalPersonList->nav->Naturalperson 。 NaturalPersonList 组件渲染一个导航组件，在我的导航组件中，我使用 react-router 的 Link 模块链接到 Naturalperson 组件。我想将我的 NaturalPersonList 组件中的道具传递给 Naturalperson ，但由于 Naturalperson 没有显式呈现并且我只是链接到它，我无法传递道具。有什么办法可以实现这个}

自然人列表：

var Nav=require('./nav.jsx');
var Router = require('react-router');
module.exports = React.createClass({


      render: function render() {

        return (<div><Nav nav1="Natural Person 1" nav2="Natural Person 2" nav3="Natural Person 3" nav4="Natural Person 4" section1="NaturalPerson" section2="NaturalPerson" section3="NaturalPerson" section4="NaturalPerson" firstName={this.props.firstName}/> 
        <Router.RouteHandler {...this.props}/></div>

        );
      }
});

导航组件：

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=NaturalPerson params={{naturalPersonId: 1}} className={this.props.navSelection==='nav-section1'?activeClass:''} 
                    activeClassName={activeClass}>{this.props.nav1}</Link>
            </li>     
          </ul>
        </nav>
      </section>
    );
  }
});

自然人：

module.exports = React.createClass({


    getInitialState :function() {
    return{
             readOnly : true


          };
          },

          submit : function(){
            this.setState({readOnly : false});
              console.log(this.state.id);
          },
          save : function(){
            this.transitionTo('/');
          },

      render: function render() {

        return (<form action="/Output" method="POST" ><div id="container_suspects">
          <input  type="submit" value="Save" ></input>     
          <button type="button" onClick={this.submit} >Edit Details</button>
        <div id="suspects_personal_details"><PD hidden="hidden"  readOnly={this.state.readOnly} 
        firstName={this.props.firsName}/><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>
        </form>
        );
      }
});

【问题讨论】：

标签： reactjs

【解决方案1】：

如果我理解正确的话。您可以从 Link 发送道具：

<Link to=NaturalPerson params={{naturalPersonId: 1}}
      className={this.props.navSelection==='nav-section1'?activeClass:''} 
      params={params: {dictionary}}
      activeClassName={activeClass}>
    {this.props.nav1}
</Link>

【讨论】：