react-router - 将道具传递给处理程序组件 [英] react-router - pass props to handler component

问题描述

我的 React.js 应用程序使用 React Router 的结构如下:

var Dashboard = require('./Dashboard');var Comments = require('./Comments');var Index = React.createClass({渲染:函数(){返回 (<div><header>一些标题</header><RouteHandler/>

);}});无功路线 = (<Route path="/" handler={Index}><Route path="comments" handler={Comments}/><DefaultRoute handler={Dashboard}/></路线>);ReactRouter.run(路由，函数(处理程序){React.render(, document.body);});

我想将一些属性传递到 Comments 组件中.

(通常我会像 <Comments myprop="value"/>)

使用 React Router 最简单、最正确的方法是什么?

解决方案

UPDATE

从新版本开始，可以直接通过 Route 组件传递 props，而无需使用 Wrapper.例如，通过使用render prop.

组件:

class Greeting extends React.Component {使成为() {const {text, match: {params}} = this.props;const {name} = 参数；返回 (<React.Fragment><h1>问候页面</h1><p>{文本} {名称}</p></React.Fragment>);}}

用法:

<Greeting text="Hello, " {...props}/>}/>

Codesandbox 示例

<小时>

旧版本

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

这是您应用更改的示例:

var Dashboard = require('./Dashboard');var Comments = require('./Comments');var CommentsWrapper = React.createClass({渲染:函数(){返回 (<评论 myprop="myvalue"/>);}});var Index = React.createClass({渲染:函数(){返回 (<div><header>一些标题</header><RouteHandler/>

);}});无功路线 = (<Route path="/" handler={Index}><Route path="comments" handler={CommentsWrapper}/><DefaultRoute handler={Dashboard}/></路线>);ReactRouter.run(路由，函数(处理程序){React.render(, document.body);});

I have the following structure for my React.js application using React Router:

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

I want to pass some properties into the Comments component.

(normally I'd do this like <Comments myprop="value" />)

What's the easiest and right way to do so with React Router?

解决方案

UPDATE

Since new release, it's possible to pass props directly via the Route component, without using a Wrapper. For example, by using render prop.

Component:

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

Usage:

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

Codesandbox Example

---

OLD VERSION

My preferred way is wrap the Comments component and pass the wrapper as a route handler.

This is your example with changes applied:

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

这篇关于react-router - 将道具传递给处理程序组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！