React-router -向处理程序组件传递道具

我有以下结构为我的React.js应用程序使用React路由器:

var Dashboard = require('./Dashboard');
var Comments = require('./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);
});

我想把一些属性传递给Comments组件。

(通常我会这样做，如<Comments myprop="value" />)

用React路由器最简单和正确的方法是什么?

当前回答

只是ColCh回答的一个后续问题。抽象一个组件的包装是很容易的:

var React = require('react');

var wrapComponent = function(Component, props) {
  return React.createClass({
    render: function() {
      return React.createElement(Component, props);
    }
  });
};

<Route path="comments" handler={wrapComponent(Comments, {myprop: value})}/>

我还没有测试这个解决方案，所以任何反馈都很重要。

需要注意的是，使用这种方法，任何通过Router发送的道具(比如params)都会被覆盖/删除。

2015-04-18 17:25:25

其他回答

你也可以结合es6和无状态函数来得到一个更清晰的结果:

import Dashboard from './Dashboard';
import Comments from './Comments';

let dashboardWrapper = () => <Dashboard {...props} />,
    commentsWrapper = () => <Comments {...props} />,
    index = () => <div>
        <header>Some header</header>
        <RouteHandler />
        {this.props.children}
    </div>;

routes = {
    component: index,
    path: '/',
    childRoutes: [
      {
        path: 'comments',
        component: dashboardWrapper
      }, {
        path: 'dashboard',
        component: commentsWrapper
      }
    ]
}

2015-11-30 07:09:58

使用ES6，你可以让组件包装内联:

<路由路径= " / "组件={()= > <应用myProp = {someValue} / >} >

如果你需要通过孩子:

<路由路径="/"组件={(道具)=> <App myProp={someValue}>{道具。孩子}< /应用程序>}>

2016-08-11 23:40:39

你可以通过将它们传递给<RouteHandler>(在v0.13.x中)或v1.0中的Route组件本身来传递道具;

// v0.13.x
<RouteHandler/>
<RouteHandler someExtraProp={something}/>

// v1.0
{this.props.children}
{React.cloneElement(this.props.children, {someExtraProp: something })}

(来自https://github.com/rackt/react-router/releases/tag/v1.0.0的升级指南)

所有子处理程序都将收到相同的一组道具——这可能有用，也可能没用，取决于具体情况。

2015-07-24 06:05:36

对于react-router 2.5.2，解决方案非常简单:

    //someConponent
...
render:function(){
  return (
    <h1>This is the parent component who pass the prop to this.props.children</h1>
    {this.props.children && React.cloneElement(this.props.children,{myProp:'value'})}
  )
}
...

2016-08-11 03:35:54

在1.0和2.0中，你可以使用Router的createElement道具来指定如何创建目标元素。文档来源

function createWithDefaultProps(Component, props) {
    return <Component {...props} myprop="value" />;
}

// and then    
<Router createElement={createWithDefaultProps}>
    ...
</Router>

2016-02-11 10:42:42

React-router -向处理程序组件传递道具

推荐文章

最新文章

标签