[英]react-router: pass props to es6 handler component
I'm using react-router, and I need to pass props to handler Comments
component (look at the code below). 我正在使用react-router,我需要将prop传递给处理程序Comments
组件(请看下面的代码)。 It's usually solved by creating a wrapper component . 通常可以通过创建包装器组件来解决 。
BUT Comments
is already a es6 wrapper of AbstractComments
, so I don't want to create one more wrapper. 但是Comments
已经是AbstractComments
的es6包装器,因此我不想再创建一个包装器。 So I do it in the next way: 因此,我将采用以下方式:
Problem/Question: look please at Comments#onChange
method 问题/疑问:请查看Comments#onChange
方法
Comments component 评论部分
// 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);
}
}
How Comments
is rendered by react-router: 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);
});
Assign the default values to props in the defaultProps as shown below. 如下所示,将默认值分配给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.