Javascript react-router - 将道具传递给处理程序组件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27864720/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
react-router - pass props to handler component
提问by Kosmetika
I have the following structure for my React.js application using React Router:
我的 React.js 应用程序使用React Router具有以下结构：
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);
});
I want to pass some properties into the Commentscomponent.
我想将一些属性传递给Comments组件。
(normally I'd do this like <Comments myprop="value" />)
（通常我会这样做<Comments myprop="value" />）
What's the easiest and right way to do so with React Router?
使用 React Router 这样做的最简单和正确的方法是什么？
采纳答案by ColCh
UPDATE
更新
Since new release, it's possible to pass props directly via the Routecomponent, without using a Wrapper. For example, by using renderprop.
从新版本开始，可以直接通过Route组件传递 props ，而无需使用 Wrapper。例如，通过使用renderprop。
Component:
成分：
class Greeting extends React.Component {
render() {
const {text, match: {params}} = this.props;
const {name} = params;
return (
<React.Fragment>
<h1>Greeting page</h1>
<p>
{text} {name}
</p>
</React.Fragment>
);
}
}
Usage:
用法：
<Route path="/greeting/:name" render={(props) => <Greeting text="Hello, " {...props} />} />
OLD VERSION
旧版本
My preferred way is wrap the Commentscomponent and pass the wrapper as a route handler.
我的首选方法是包装Comments组件并将包装器作为路由处理程序传递。
This is your example with changes applied:
这是您应用更改的示例：
var Dashboard = require('./Dashboard');
var Comments = require('./Comments');
var CommentsWrapper = React.createClass({
render: function () {
return (
<Comments myprop="myvalue"/>
);
}
});
var Index = React.createClass({
render: function () {
return (
<div>
<header>Some header</header>
<RouteHandler/>
</div>
);
}
});
var routes = (
<Route path="/" handler={Index}>
<Route path="comments" handler={CommentsWrapper}/>
<DefaultRoute handler={Dashboard}/>
</Route>
);
ReactRouter.run(routes, function (Handler) {
React.render(<Handler/>, document.body);
});
回答by Thomas E
If you'd rather not write wrappers, I guess you could do this:
如果您不想编写包装器，我想您可以这样做：
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}/>
);
回答by Rajesh Naroth
回答by Daniel Reina
This is the solution from Rajesh, without the inconvenient commented by yuji, and updated for React Router 4.
这是来自 Rajesh的解决方案，没有yuji 评论的不便，并针对 React Router 4 进行了更新。
The code would be like this:
代码如下：
<Route path="comments" render={(props) => <Comments myProp="value" {...props}/>}/>
Note that I use renderinstead of component. The reason is to avoid undesired remounting. I also pass the propsto that method, and I use the same props on the Comments component with the object spread operator (ES7 proposal).
请注意，我使用render代替component. 原因是为了避免不需要的重新安装。我还将 传递props给该方法，并且我在 Comments 组件上使用了相同的 props 和对象扩展运算符（ES7 提议）。
回答by sigmus
Just a follow-up to ColCh's answer. It is quite easy to abstract the wrapping of a component:
只是对 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})}/>
I haven't tested this solution yet so any feedback is important.
我还没有测试过这个解决方案，所以任何反馈都很重要。
It's important to note that with this method, any props sent via the Router (such as params) get overwritten / removed.
重要的是要注意，使用此方法，通过路由器发送的任何道具（例如参数）都会被覆盖/删除。
回答by cachvico
You can pass props by passing them to <RouteHandler>(in v0.13.x) or the Route component itself in v1.0;
您可以通过将它们传递给<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 })}
(from the upgrade guide at https://github.com/rackt/react-router/releases/tag/v1.0.0)
（来自https://github.com/rackt/react-router/releases/tag/v1.0.0的升级指南）
All child handlers will receive the same set of props - this may be useful or not depending on the circumstance.
所有子处理程序都将收到相同的一组道具 - 这可能有用或没有用，具体取决于情况。
回答by Nick
Using ES6 you can just make component wrappers inline:
使用 ES6，您可以内联组件包装器：
<Route path="/" component={() => <App myProp={someValue}/>} >
<Route path="/" component={() => <App myProp={someValue}/>} >
If you need to pass children:
如果您需要传递孩子：
<Route path="/" component={(props) => <App myProp={someValue}>{props.children}</App>} >
<Route path="/" component={(props) => <App myProp={someValue}>{props.children}</App>} >
回答by peter.mouland
React-router v4 alpha
反应路由器 v4 alpha
now there is a new way, to do this, although very similar to the previous method.
现在有一种新方法可以做到这一点，尽管与以前的方法非常相似。
import { Match, Link, Miss } from 'react-router';
import Homepage from './containers/Homepage';
const route = {
exactly: true,
pattern: '/',
title: `${siteTitle} - homepage`,
component: Homepage
}
<Match { ...route } render={(props) => <route.component {...props} />} />
P.S. This works only in alpha version, and were removed after the v4 alpha release. In v4 latest, is once again , with the path and exact props.
PS 这仅适用于 alpha 版本，并在 v4 alpha 版本后被删除。在最新的 v4 中，再次使用路径和精确道具。
react-legoan example app contains code that does exactly this in routes.js on its react-router-4 branch
react-lego一个示例应用程序包含在它的 react-router-4 分支上的 routes.js中执行此操作的代码
回答by cgenco
Here's the cleanest solution I've come up with (React Router v4):
这是我想出的最干净的解决方案（React Router v4）：
<Route
path="/"
component={props => <MyComponent {...props} foo="lol" />}
/>
MyComponentstill has props.matchand props.location, and has props.foo === "lol".
MyComponent仍然有props.match和props.location并且有props.foo === "lol"。
回答by mg74
Wrap it with a stateless function component:
用一个无状态的函数组件包裹它：
<Router>
<Route
path='/'
component={({children}) =>
<MyComponent myProp={'myVal'}>{children}</MyComponent/>
}/>
</Router>
