Javascript 反应路由器:将道具传递给es6处理程序组件
我正在使用react路由器,我需要将道具传递给handlerJavascript 反应路由器:将道具传递给es6处理程序组件,javascript,reactjs,react-router,Javascript,Reactjs,React Router,我正在使用react路由器,我需要将道具传递给handlerComments组件(查看下面的代码)。通常是这样 但是Comments已经是AbstractComments的es6包装,所以我不想再创建一个包装。因此,我采用下一种方法: 问题/问题:请查看注释#onChange方法 评论组件 react router如何呈现评论: var Index = React.createClass({ render: function () { return ( <div
Comments
组件(查看下面的代码)。通常是这样
但是Comments
已经是AbstractComments
的es6包装,所以我不想再创建一个包装。因此,我采用下一种方法:
问题/问题:请查看注释#onChange
方法
评论组件
react router如何呈现评论
:
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);
});
var Index=React.createClass({
渲染:函数(){
返回(
某个标题
);
}
});
变量路由=(
);
ReactRouter.run(路由、函数(处理程序){
React.render(,document.body);
});
将默认值分配给defaultProps中的道具,如下所示
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 ;
在defaultProps中为道具指定默认值,如下所示
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 ;
非常简单的解决方案-执行
Comments.defaultProps={…}
而不是在构造函数内分配它们非常简单的解决方案-执行Comments.defaultProps={…}
而不是在构造函数内分配它们