[英]react-router: pass props to es6 handler component
我正在使用react-router,我需要将prop传递给处理程序Comments
组件(请看下面的代码)。 通常可以通过创建包装器组件来解决 。
但是Comments
已经是AbstractComments
的es6包装器,因此我不想再创建一个包装器。 因此,我将采用以下方式:
问题/疑问:请查看Comments#onChange
方法
评论部分
// Where AbstractComment extends React.Component
class Comments extends AbstractComments {
constructor(props) {
//Pass my custom props to component
super(_.assign(props, {
chatName: '....',
title: '...',
comments: '.....'
}));
}
_onChange() {
//PROBLEM: after setState Comments component get rendered
//without my custom props: (chatName, title, comments)
//QUESTION: how to re-render it with the same properties?
this.setState(someNewState);
}
}
react-router如何呈现Comments
:
var Index = React.createClass({
render: function () {
return (
<div>
<header>Some header</header>
<RouteHandler />
</div>
);
}
});
var routes = (
<Route path="/" handler={Index}>
<Route path="comments" handler={Comments}/>
<DefaultRoute handler={Dashboard}/>
</Route>
);
ReactRouter.run(routes, function (Handler) {
React.render(<Handler/>, document.body);
});
如下所示,将默认值分配给defaultProps中的prop。
class Comments extends AbstractComments {
constructor(props) {
//Pass my custom props to component
super(_.assign(props, {
chatName: '....',
title: '...',
comments: '.....'
}));
}
_onChange() {
//PROBLEM: after setState Comments component get rendered
//without my custom props: (chatName, title, comments)
//QUESTION: how to re-render it with the same properties?
this.setState(someNewState);
}
}
Comments.defaultProps = {chatName: '....',
title: '...',
comments: '.....'};
export default Comments ;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.