如何將 Props 傳遞給 React Router 中的處理元件？

在React Router 中將props 傳遞給已處理的元件

在使用React Router 的React.js 應用程式中，經常需要將props 傳遞給已處理的組件。為了實現這一點，有幾種方法可以考慮：

一種簡單的方法是用一個新組件包裝已處理的組件，該新組件獲取所需的props 並根據需要將它們傳遞下來：

<code class="javascript">var CommentsWrapper = React.createClass({
  render: function () {
    return <Comments myprop="value" />;
  }
});</code>

這樣，您就可以使用CommentsWrapper 作為所需路由的處理程序：

<code class="javascript">var routes = (
  <Route path="/" handler={Index}>
    <Route path="comments" handler={CommentsWrapper}/>
    <DefaultRoute handler={Dashboard}/>
  </Route>
);</code>

但是，如果您需要將props 傳遞給多個已處理的元件，這種方法可能會變得笨拙。在這種情況下，更靈活的方法是在路由配置中使用component 屬性，它允許您直接將props 傳遞給處理的元件：

<code class="javascript">var routes = (
  <Route path="/" component={Index}/>
);

var Index = React.createClass({
  render: function () {
    return (
      <div>
        <header>Some header</header>
        <RouteHandler myprop="value" />
      </div>
    );
  }
});</code>

透過這種方法，您可以將props 直接傳遞給無需包裝器的評論組件：

<code class="javascript"><Route path="comments" component={Comments}/></code>

以上是如何將 Props 傳遞給 React Router 中的處理元件？的詳細內容。更多資訊請關注PHP中文網其他相關文章！