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

Question

我设置了一条路线：

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

并且我制作了一个 link，它使用了以下路线：

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

我想在创建后将此参数保存为 BodyBriefsList class 中的道具 JS Date 对象，以便它可以用作 this.props.briefDate 而不是 this.props.params.briefDate 其中包含路径中的字符串日期。

执行此操作的正确方法是什么？

Answer 1

我建议这样:

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

希望对您有所帮助:)

Answer 2

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

如果您有一个需要特定属性的组件，并且您希望将它与不直接提供该属性的系统桥接，您应该使用一个组件来桥接二。这些通常被称为 "container components." 容器组件的唯一目的是将来自各种来源的数据按摩到子组件需要的道具中。

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>

如果您发现自己经常这样做，您可以通过创建一个函数来重用该模式，该函数知道如何包装组件并将其接收的 props 转换为包装组件所需的 props。

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>

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

React-router: How should I convert a routed parameter to a prop?

reactjs

react-router