如何將 Props 傳遞給 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中文網其他相關文章！