React router 1.0 将多个 props 传递给 children 路由

Question

我在一个应用程序上使用 react-router 1.0 和 react-redux，我想知道在更大的应用程序上将道具传递给 children 的最佳策略是什么。这是一个基本情况：

假设我有一条路由 /admin/users/edit/:id，其组件具有以下结构：

路线：

<Router>
  <Route path="admin" component={Admin}>
    <Route path="users" component={Users}>
      <Route path="edit/:id" component={Edit}/>
    </Route>
  </Route>
</Router>

管理员：

class Admin extends React.Component {

  render() {
    return (
      {this.props.children}
    )
  }
}

用户：

class User extends React.Component {

  edit = (id, params) => {
    const { dispatch } this.props;
    dispatch(edit(id, params));
  } 

  other functions (add, remove) ...

  render() {
    return (
      {this.props.children}
    )
  }
}

function mapStateToProps(state) {
  const { users } = state;
  return { users };
}

export default connect(mapStateToProps)(User);

编辑：

class Edit extends React.Component {

  submit () => {
    const { id } = this.props.params;
    const { firstName } = this.refs;
    this.props.edit(id, {firstName: firstName.value});
  }

  render() {
    const { id } = this.props.params;
    const user = this.props.users[id];
    return (
       <form>
         <input ref='firstName' defaultValue={user.firstName}/>
         <button onClick={this.submit}>Submit</button>
       </form>
    )
  }
}

我如何将用户和编辑功能道具传递给 children？

我知道 React.cloneElement()（如 https://github.com/rackt/react-router/tree/master/examples/passing-props-to-children），但如果我有多个路线，如 /users/add、/users/remove/:id 等，我会传递和暴露所有功能（编辑、添加、删除...）全部 children。当您有多个 children.

时，该解决方案似乎效果不佳

我想让我的 children 尽可能地笨，并在整个应用程序中使用相同的结构（/images/add、/images/remove/:id 等）。

有什么建议吗？

Answer 1

您有几个选择：

一级children:

使用React.cloneElement()，这是您已经知道的事情。不过，我不会将它用于深层嵌套的组件。

到所有路线：

使用createElement():

<Router createElement={createElement} />

// default behavior
function createElement(Component, props) {
  // make sure you pass all the props in!
  return <Component {...props}/>
}

// maybe you're using something like Relay
function createElement(Component, props) {
  // make sure you pass all the props in!
  return <RelayContainer Component={Component} routerProps={props}/>
}

在 React Router docs 中查看更多信息。

使用上下文：

Note:
Context is an advanced and experimental feature. The API is likely to change in future releases.

在 React docs 中查看如何使用它。

react-router#1531.

中也有关于它的完整讨论帖

React router 1.0 将多个 props 传递给 children 路由

React router 1.0 pass multiple props to children routes

reactjs

react-router

redux

一级children:

到所有路线：

使用上下文：