如何将 Props 传递给 React Router 中的处理程序组件？-js教程-PHP中文网

如何将 Props 传递给 React Router 中的处理程序组件？

Linda Hamilton

发布： 2024-10-23 17:51:01

原创

996 人浏览过

How to Pass Props to Handler Components in React Router?

使用 React Router 将 props 传递给处理程序组件

在利用 React Router 的 React.js 应用程序中，您可能会遇到需要将 props 传递给特定处理程序组件的场景。考虑以下应用程序结构：

<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>

登录后复制

要将 props 传递给 Comments 组件，通常使用这样的语法。然而，这种方法与 React Router 不兼容，React Router 期望处理程序组件是纯函数或类组件。

一种解决方案是创建一个包装器组件，封装处理程序组件和传入的 props：

<code class="javascript">// CommentWrapper
var CommentWrapper = React.createClass({
  render: function () {
    return <Comments {...this.props} />;
  }
});

var routes = (
  <Route path="/" handler={Index}>
    <Route path="comments" handler={CommentWrapper} myprop="value"/>
    <DefaultRoute handler={Dashboard}/>
  </Route>
);</code>

登录后复制

或者，您可以利用类组件和 this.props.route 对象来访问传递给父路由的 props：

<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>

登录后复制

通过在 / 路由上设置 foo 属性，您可以稍后在 Index 组件中使用 this.props.route 访问该 prop。

以上是如何将 Props 传递给 React Router 中的处理程序组件？的详细内容。更多信息请关注PHP中文网其他相关文章！