Question

我设置了路线：

<Route name="home" path="/" handler={App}>
    <Route name="briefs" path="/briefs/:briefDate" handler={BodyBriefsList} />
    <DefaultRoute handler={BodyHome}/>
</Route>

我已经建立了一个利用路线的链接：

<Link to={"briefs"} params={{ briefDate: '2015-06-05' }}>View Briefs</Link>

我想在创建BodyBriefsList类时将此param保存为prop JS对象，以便它可以用作this.props.briefDate而不是包含路径中字符串日期的this.props.params.briefDate

这样做的正确方法是什么？

Answer 1

组件接收的道具由呈现它的组件决定。你不应该直接改变this.props。

如果您有一个需要某个属性的组件，并且您希望将其与某个不直接提供该属性的系统桥接，那么您应该使用一个组件来桥接这两个属性。这些通常被称为“容器组件”。容器组件的唯一目的是将来自各种源的数据按摩到子组件所需的道具中。

var BodyBriefsListContainer = React.createClass({
  render: function() {
    return <BodyBriefList briefDate={this.props.params.briefDate} />;
  }
});

<Route name="home" path="/" handler={App}>
  <Route name="briefs" path="/briefs/:briefDate" handler={BodyBriefsListContainer} />
  <DefaultRoute handler={BodyHome}/>
</Route>

如果你发现自己做了很多，你可以通过创建一个知道如何包装组件并将它接收的道具转换为包装组件所需的道具的函数来重用模式。

var wrap = function(Component, propsTransformer) {
  return React.createClass({
    render: function() {
      var childProps = propsTransformer(this.props);
      return <Component {...childProps} />;
    }
  });
}

var BodyBriefsListContainer = wrap(BodyBriefsList, function(props) {
  return { briefDate: props.params.briefDate };
});

<Route name="home" path="/" handler={App}>
  <Route name="briefs" path="/briefs/:briefDate" handler={BodyBriefsListContainer} />
  <DefaultRoute handler={BodyHome}/>
</Route>

Answer 2

我建议这样：

 //in BodyBriefLists component
componentWillMount: function(){
  var paramDate = this.props.params.briefDate
  this.props.briefDate = Date.parse(paramDate.replace(/-/g,"/"))
}

我希望它会有所帮助：）

React-router：我应该如何将路由参数转换为道具？

2 个答案: