react-router-将道具传递给处理程序组件

小编典典

react-router-将道具传递给处理程序组件

javascript

我使用React Router的React.js应用程序具有以下结构：

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组件。

（通常我会这样做<Comments myprop="value" />）

用React Router做到这一点最简单，正确的方法是什么？

阅读 283

2020-04-25

共1个答案

小编典典

更新

自新版本发布以来Route，无需使用包装器就可以直接通过组件传递道具。例如，通过使用renderprop。

零件：

class Greeting extends React.Component {
  render() {
    const {text, match: {params}} = this.props;

    const {name} = params;

    return (
      <React.Fragment>
        <h1>Greeting page</h1>
        <p>
          {text} {name}
        </p>
      </React.Fragment>
    );
  }
}

用法：

<Route path="/greeting/:name" render={(props) => <Greeting text="Hello, " {...props} />} />

旧版本

我的首选方式是包装Comments组件并将包装器作为路由处理程序传递。

这是您应用了更改的示例：

var Dashboard = require('./Dashboard');
var Comments = require('./Comments');

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

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

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

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

2020-04-25