Question

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

假设我的路由/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>
    )
  }
}

我如何通过用户和＆amp;编辑功能道具给孩子们？

我知道React.cloneElement()（如https://github.com/rackt/react-router/tree/master/examples/passing-props-to-children中所述），但如果我有多条路线，例如/users/add，/users/remove/:id等，我会通过并公开所有所有孩子的功能（编辑，添加，删除......）。当你有一个以上的孩子时，这个解决方案看起来效果不佳。

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

有什么建议吗？

Answer 1

您有几个选择：

一级儿童：

使用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。

中查看更多内容

使用上下文：

注意：
上下文是一种先进的实验性功能。 API可能会在将来的版本中发生变化。

了解如何在React docs中使用它。

react-router#1531中还有关于它的整个帖子。

React路由器1.0将多个道具传递给子路径

1 个答案:

一级儿童：

到所有路线：

使用上下文：