时间戳

首页 > 解决方案 > 如何使用重新选择将道具传递给包装在容器中的子组件？

javascript - 如何使用重新选择将道具传递给包装在容器中的子组件？

问题描述

我正在尝试将道具从父组件传递到包装在容器中的子组件。我想使用选择器来使用作为道具传递下来的字符串，以便它可以选择父数据的子状态。

目前数据结构如下：

Industry: {
 Data: {
  coolants: [array],
  machines: [array],
  tools: [array]
 }
}

使用选择器我可以选择所有行业数据，但是我试图使用选择器来选择“冷却剂”

在我的父组件中，我将传递道具以选择“冷却剂”： <ChartContainer category='coolants' />

ChartContainer.js：

const mapStateToProps = createStructuredSelector({
    data: makeSelectData(),
})

const withConnect = connect(mapStateToProps, null)
const withReducer = injectReducer({ key: 'industry', reducer })

export default compose (
    withReducer,
    withConnect
)(ChartComponent);

选择器.js

const selectDomain = () => state => state.get('industry')

const makeSelectData = () => createSelector(
  selectDomain(),
  substate => substate.toJS()
)

export {
  makeSelectData
}

标签： javascriptreactjsreduxreselect

解决方案

你需要两件事：

  1. 在选择器中使用组件道具的类别值（mapStateToProps 文档： ownProps）；
  2. 使用这个道具在你的不可变数据结构中获得嵌套值（ImmutableJS 文档：getIn）；

可能的变化是：

const selectDomain = () => (state, props) => state.getIn(['industry', props.category])

推荐阅读