Question

我有一个连接到redux商店的App组件：

import React from 'react'
import { connect } from 'react-redux'

function App(props) {
  return (
    <div>
      {props.children}
    </div>
  );
}

function mapStateToProps(state) {
  return { 
    todos: state.something
  }
}

export default connect(mapStateToProps)(App)

App是我的反应路由器层次结构中的根级别组件，因此接收所有子路由作为子级：

export default(
  <Route component={App} path="/">
    <IndexRoute component={Home} />
    <Route component={PageNotFound} path="*" />
  </Route>
);

我希望能够将通过App传递给mapStateToProps的道具传递给子组件。似乎可接受的方法是使用cloneElement来允许将道具传递给孩子（How to pass props to {this.props.children}）。所以上面第一个代码段中的代码：

<div>
  {props.children}
</div>

变为：

<div>
  {React.cloneElement(props.children, { ...props }
</div>

我觉得这很难看，因为这意味着我盲目地将我连接的应用程序组件中的所有道具传递给我的子路径组件。

这真的是可接受的做法吗？

Answer 1

如果你知道在mapStateToProps中创建了什么道具，你可以只提取并传递它们。

此外，如果您从mapStateToProps返回包含所有必要数据的单个道具，可能会有所帮助，请将其命名为componentState：

function mapStateToProps({todos, somethingElse}) {
  return {
    componentState: { todos, somethingElse }
  }
}

然后你可以只传递这个单一的道具

<div>
  {React.cloneElement(props.children, { componentState: this.props.componentState }
</div>

使用Redux的React路由器：仅将必要的道具传递到子级路由

1 个答案: