如何从具有多个子级的父级访问特定的子级状态？

npm install redux react-redux

// parentComponent.js

import { createStore } from 'redux';

// 定义reducer
const reducer = (state = {}, action) => {
  switch (action.type) {
    case 'UPDATE_CHILD_STATE':
      return {
        ...state,
        [action.childId]: action.payload,
      };
    default:
      return state;
  }
};

// 创建store
const store = createStore(reducer);

// 导出store
export default store;

// childComponent.js

import { connect } from 'react-redux';

// 子级组件
const ChildComponent = ({ childState }) => {
  // 使用特定子级状态
  return (
    <div>
      <p>子级状态：{childState}</p>
    </div>
  );
};

// 订阅状态管理器，获取特定子级状态
const mapStateToProps = (state, ownProps) => {
  return {
    childState: state[ownProps.childId],
  };
};

// 使用connect函数连接子级组件和状态管理器
export default connect(mapStateToProps)(ChildComponent);

// parentComponent.js

import { Provider } from 'react-redux';
import store from './store';
import ChildComponent from './childComponent';

// 父级组件
const ParentComponent = () => {
  return (
    <Provider store={store}>
      <div>
        <h1>父级组件</h1>
        <ChildComponent childId="child1" />
        <ChildComponent childId="child2" />
      </div>
    </Provider>
  );
};

export default ParentComponent;