[英]React.js : passing props to a react router linked component
我想通过反应路由器将道具从组件传递到子组件。 我的流程是这样的:NaturalPersonList-> nav-> Naturalperson。 NaturalPersonList组件呈现一个nav组件,在我的nav组件内部,我使用react-router的Link模块链接到Naturalperson组件。 我想将一个道具从我的NaturalPersonList组件传递到Naturalperson,但是由于Naturalperson没有显式渲染,而我只是链接到它,所以我无法传递这些道具。 有什么办法可以达到这个目的}
NaturalPersonList:
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>
);
}
});
NaturalPerson:
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>
);
}
});
如果我正确理解你。 您可以从链接发送道具:
<Link to=NaturalPerson params={{naturalPersonId: 1}}
className={this.props.navSelection==='nav-section1'?activeClass:''}
params={params: {dictionary}}
activeClassName={activeClass}>
{this.props.nav1}
</Link>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.