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

JavaScript

猴子乐

2020-03-10

我使用React Router的 React.js应用程序具有以下结构

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 Router做到这一点最简单,正确的方法是什么?

第439篇《react-router-将道具传递给处理程序组件》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

9个回答
录泰红木家具 2020.03.10

Use the solution like above and this works in v3.2.5.

<Route
  path="/foo"
  component={() => (
    <Content
      lang="foo"
      meta={{
        description: lang_foo.description
      }}
    />
  )}
/>

or

<Route path="/foo">
  <Content
    lang="foo"
    meta={{
      description: lang_foo.description
    }}
  />
</Route>
小卤蛋樱 2020.03.10

对于反应路由器2.x。

const WrappedComponent = (Container, propsToPass, { children }) => <Container {...propsToPass}>{children}</Container>;

在你的路线上...

<Route path="/" component={WrappedComponent.bind(null, LayoutContainer, { someProp })}>
</Route>

确保第三个参数是类似的对象{ checked: false }

小小逆天 2020.03.10

这是我想出的最干净的解决方案(React Router v4):

<Route
  path="/"
  component={props => <MyComponent {...props} foo="lol" />}
/>

MyComponent仍然有props.matchprops.location,并且有props.foo === "lol"

你的名字 2020.03.10

在1.0和2.0中,您可以使用createElementprop of Router指定如何精确地创建目标元素。文件来源

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

// and then    
<Router createElement={createWithDefaultProps}>
    ...
</Router>
梅飞云 2020.03.10

您可以通过将道具传递到<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的升级指南

所有子处理程序都将收到相同的道具集-视情况而定是否有用。

番长阳光 2020.03.10

使用ES6,您可以使组件包装器内联:

<Route path="/" component={() => <App myProp={someValue}/>} >

如果您需要让孩子通过:

<Route path="/" component={(props) => <App myProp={someValue}>{props.children}</App>} >

GO西门 2020.03.10

这是Rajesh提供解决方案,没有yuji的不便之处,并已针对React Router 4进行了更新。

代码如下:

<Route path="comments" render={(props) => <Comments myProp="value" {...props}/>}/>

请注意,我使用render代替component原因是为了避免不必要的重新安装我也将传递props给该方法,并且在Comment组件上使用与对象散布运算符相同的道具(ES7提案)。

达蒙猿 2020.03.10

复制ciantic在接受的回复中的评论

<Route path="comments" component={() => (<Comments myProp="value" />)}/>

我认为这是最优雅的解决方案。有用。帮助过我。

Winter 2020.03.10

如果您不想编写包装器,我想您可以这样做:

class Index extends React.Component { 

  constructor(props) {
    super(props);
  }
  render() {
    return (
      <h1>
        Index - {this.props.route.foo}
      </h1>
    );
  }
}

var routes = (
  <Route path="/" foo="bar" component={Index}/>
);

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android