简体   繁体   English

react-router:将道具传递给es6处理程序组件

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM