将 Props 传递给 React Router 中的处理程序组件
在使用 React Router 的 React.js 应用程序中，可能存在传递特定属性的情况子组件是必要的。例如，考虑以下结构：
<code class="javascript">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);
});</code>目标是将属性传递到 Comments 组件。通常，这可以直接在组件声明中实现。然而，对于 React Router，需要一种替代方法。
一个选择是使用包装器组件。这将涉及创建一个单独的组件来包装 Comments 组件并传递所需的 props。这是一个示例：
<code class="javascript">var CommentsWithProps = React.createClass({
render: function () {
return (
<Comments myprop={this.props.myprop} />
);
}
});
// Then in the routes definition:
var routes = (
<Route path="/" handler={Index}>
<Route path="comments" handler={CommentsWithProps}/>
<DefaultRoute handler={Dashboard}/>
</Route>
);</code>另一种不使用包装组件的方法是修改 Index 组件：
<code class="javascript">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}/>
);</code>以上是如何将 Props 传递给 React Router 中的处理程序组件？的详细内容。更多信息请关注PHP中文网其他相关文章！
