Question

我想编写一个传递任何子道具的包装器组件。例如，在纯反应auth系统中。

<Router history={ hashHistory } >
<Route path="/" component={Base}>
<Route component={Auth}>
    <Route path="/who" component={Who} />
    <Route path="/features" component={Features} />
    <Route path="/try" component={Try} />
</Route>
</Route>
</Router>

我想通过道具将用户传递给Auth中的Who，Features或Try组件，这些组件将从本地存储中提取。

我试图做的愚蠢的事情是操纵this.props或this.props.children但是这不行，推荐的解决方案是什么？

class Auth extends Component {
  render() {
    //find user or null
    var user = JSON.parse(localStorage.getItem('user')) || [];
    //this.props.user = user;
    console.log('top level router props.user', this.props.user);
    return (
    <div>
    {this.props.children}
    </div>
    );
  }
}

Answer 1

Jess看到这个答案。 React clone元素就是你想要的。

React router and this.props.children - how to pass state to this.props.children

render() {
    var childrenWithProps = React.cloneElement(this.props.children, {someProp: this.state.someProp});
    return (
      <div>
        <Header />
        {childrenWithProps}
      </div>
    );
  }

Answer 2

如果您升级到版本4，则可以使用与您自己的HOC匹配进行身份验证。

https://react-router.now.sh/auth-workflow

将用户道具传递给所有孩子反应路由器

2 个答案: