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

Question

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

现在数据的结构如下:

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

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

在我的父组件中，我正在传递用于选择“冷却剂”的 Prop : <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
}

Answer 1

你需要两件事:

1. 在选择器中使用组件属性的类别值 ( mapStateToProps docs: ownProps )；
2. 使用此 props 获取不可变数据结构中的嵌套值 ( ImmutableJS docs: getIn );

可能的改变是:

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