ReactJS：如何通过ID修改子组件状态？

我有一个父组件，通过循环n次渲染子组件，并为每个子组件分配唯一ID。现在需要在父组件中根据输入逐个修改每个子组件的状态，请问该如何实现？是否必须声明n个状态变量？

当前父组件代码：

const Parent = () => {
  const [color1, setColor1] = useState('yellow')
  const [color2, setColor2] = useState('yellow')

  function updateState1 () {
    setColor1('red')
  }

  function updateState2 () {
    setColor2('red')
  }

  return (
    <>
      <div>Parent</div>
      <Child childState={color1} updateState={updateState1} id='1' />
      <Child childState={color2} updateState={updateState2} id='2' />
    </>
  )
}

子组件代码（目前ID未发挥作用，希望通过统一函数传入目标按钮ID和颜色完成更新）：

const btnStyle = {
  backgroundColor: 'green'
}

const Child = ({ childState, updateState, id, targetButton }) => {
  
  function handleClick () {
    updateState()
  }
  
  return (
    <button id={id} style={((childState === null) && a==id) ? btnStyle: {"backgroundColor":childState}} onClick={handleClick}>
      Click me
    </button>
  )
}

完全不需要声明n个独立的状态变量，用对象或数组集中管理所有子组件的状态即可，只需要一个状态变量+一个统一更新函数，就能处理任意数量的子组件。

1. 重构父组件的状态逻辑 #

把分散的color1、color2改成一个对象（或数组），用子组件的ID作为键，对应存储每个子组件的状态值。同时写一个通用的更新函数，接收目标ID和要设置的状态值，来修改对应子组件的状态。

修改后的父组件代码：

const Parent = () => {
  // 用对象集中管理所有子组件的颜色状态，key是子组件ID
  const [childColors, setChildColors] = useState({
    '1': 'yellow',
    '2': 'yellow'
    // 如果要循环生成n个子组件，可动态初始化状态：
    // ...Array.from({length: n}, (_, i) => ({[i+1]: 'yellow'})).reduce((acc, cur) => ({...acc, ...cur}), {})
  })

  // 统一的状态更新函数：接收目标ID和颜色，修改对应子组件的状态
  const updateChildState = (targetId, color) => {
    setChildColors(prevState => ({
      ...prevState, // 保留其他子组件的状态
      [targetId]: color // 更新目标子组件的状态
    }))
  }

  // 要渲染的子组件ID列表（n个的话动态生成即可）
  const childIds = ['1', '2']

  return (
    <>
      <div>Parent</div>
      {childIds.map(id => (
        <Child
          key={id} // 循环渲染必须加key
          id={id}
          childState={childColors[id]}
          // 给子组件传递绑定了当前ID的更新函数
          updateState={(color) => updateChildState(id, color)}
        />
      ))}
    </>
  )
}

2. 调整子组件适配统一逻辑 #

子组件只需要在触发操作时，调用传入的updateState函数并传入要设置的状态值即可。另外你原代码里的a==id是笔误，这里修正为判断当前ID是否等于目标按钮ID的逻辑：

const btnStyle = {
  backgroundColor: 'green'
}

const Child = ({ childState, updateState, id, targetButton }) => {
  function handleClick () {
    // 点击时调用统一更新函数，传入要设置的颜色（这里以red为例，可按需修改）
    updateState('red')
  }
  
  return (
    <button 
      id={id} 
      style={
        // 修正原代码的逻辑错误，假设targetButton是父组件传入的目标ID
        (childState === null && id === targetButton) ? btnStyle : { backgroundColor: childState }
      } 
      onClick={handleClick}
    >
      Click me
    </button>
  )
}

补充说明 #

• 如果是动态生成n个子组件，只需要生成对应的ID数组（比如Array.from({length: n}, (_, i) => String(i+1))），然后用map循环渲染即可，状态初始化也可以动态生成。
• 状态管理选择对象还是数组：如果子组件ID是字符串/非连续数字，用对象更直观；如果是连续数字ID，用数组（通过索引定位）更方便，两种方式逻辑类似。

内容的提问来源于stack exchange，提问作者Some guy 101