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

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

在React Router 中，將props 傳遞給處理程序元件是一個常見的需求。考慮以下結構：

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);
});

直接傳遞道具

傳統上，您可以將道具直接傳遞到評論組件，如下所示：

<Comments myprop="value" />

透過React Router 傳遞Props

但是，在React Router 中，props 必須透過Route 的元件prop 傳遞。有兩種方法可以做到這一點：

1。使用包裝組件

建立一個包裝處理程序組件的包裝組件：

var RoutedComments = React.createClass({
  render: function () {
    return <Comments {...this.props} myprop="value" />;
  }
});

然後，在路由中使用RoutedComments 組件而不是Comments 組件：

<Route path="comments" handler={RoutedComments}/>

2.使用帶有路由屬性的類別元件

定義一個繼承自React.Component 的類別元件並使用元件屬性：

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

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