如何將 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"></comments>;
  }
});</code>

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

<code class="javascript">var routes = (
  <route path="/" handler="{Index}">
    <route path="comments" handler="{CommentsWrapper}/">
    <defaultroute handler="{Dashboard}/">
  </defaultroute></route>
);</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"></routehandler>
      </div>
    );
  }
});</route></code>

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

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

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