如何將屬性傳遞給 React Router 中的處理程序元件？

將Props 傳遞給React Router 中的處理程序元件

在利用React Router 的React 應用程式中，需要將屬性傳遞給動態載入的處理程序元件。

考慮以下React Router 配置：

<code class="javascript">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>
);</code>

要將屬性傳遞給Comments 元件，您可以擴充Index 元件，如下所示：

<code class="javascript">class Index extends React.Component { // using babel here

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <h1>
        Index - {this.props.route.foo}
      </h1>
    );
  }
}

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

這種方法可讓您存取直接在Index 元件中使用foo 屬性，有效地將其傳遞給Comments 元件。

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