React,路由器映射,如何将props作为对象数组传递给子节点

时间:2018-06-09 09:15:32

标签: reactjs react-router-v4

我有一个名为Content.js的组件,它从父级接收道具然后映射路由,如何将道具传递给孩子?

App.js

render() {

    const title = [{"id":0, "tit":"Home", "path":"/"}, {"id":1, "tit":"Works", "path":"/works"}, {"id":2, "tit":"About", "path":"/about"}];

    return (
      <div>
        <Menu title={title}/>
        <Content title={title}/>
      </div>
    );
}

Content.js

 render() {
    const routeComponents = this.props.title.map(({path, tit}, key) => <Route exact path={path} component={Page} tit={tit} key={key} />);
    return (
      <Switch>
         {routeComponents}
      </Switch>
    );

 }

Page.js

render()
{
    return (
        <div>
            <h1>Hello {this.props.tit}</h1>
        </div>
    )
}

我的道具未定义。

0 个答案:

没有答案