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

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

在使用React Router 的React.js 應用程式中，可能存在傳遞特定屬性的情況子組件是必要的。例如，考慮以下結構：

<code class="javascript">var Dashboard = require('./Dashboard');
var Comments = require('./Comments');

var Index = React.createClass({
  render: function () {
    return (
      <div>
        <header>Some header</header>
        <routehandler></routehandler>
      </div>
    );
  }
});

var routes = (
  <route path="/" handler="{Index}">
    <route path="comments" handler="{Comments}/">
    <defaultroute handler="{Dashboard}/">
  </defaultroute></route>
);

ReactRouter.run(routes, function (Handler) {
  React.render(<handler></handler>, document.body);
});</route></code>

目標是將屬​​性傳遞到 Comments 元件。通常，這可以直接在元件聲明中實現。然而，對於 React Router，需要一種替代方法。

一個選擇是使用包裝器組件。這將涉及創建一個單獨的組件來包裝 Comments 組件並傳遞所需的 props。這是一個例子：

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

// Then in the routes definition:

var routes = (
  <route path="/" handler="{Index}">
    <route path="comments" handler="{CommentsWithProps}/">
    <defaultroute handler="{Dashboard}/">
  </defaultroute></route>
);</route></code>

另一個不使用包裝組件的方法是修改 Index 組件：

<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}/">
);</route></code>

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