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最简单和正确的方法是什么？

---

---

UPDATE自新版本以来，可以直接通过Route组件传递道具，而无需使用包装器

例如，通过使用render道具。 链接到反应路由器：https：//reacttraining.com/react-router/web/api/Route/render-func

codesandbox上的代码示例：https：//codesandbox.io/s/z3ovqpmp44

零件

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

---

如果你不想写包装，我想你可以这样做：

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

---

在接受的回复中从ciantic的评论复制：

<Route path="comments" component={() => (<Comments myProp="value" />)}/>

在我看来，这是最优雅的解决方案。 有用。 帮助过我。

链接地址: http://www.djcxy.com/p/52115.html

上一篇: javascript

下一篇: Programmatically Navigate using react