React中如何在Parent组件的items循环内仅渲染单个Child实例

当前点击循环生成的任意div时，所有div都会渲染Child组件，需要调整代码，让Child只出现在被点击的那个div里——比如点击id为one的div，<Child />仅添加到该div内部。

原代码：

const Child = () => {
  return (
    <div>Child</div>
  )
}

const Parent = () => {
  const [items, setItems] = useState([])
  const [child, setChild] = useState(<></>)

  useEffect(() => {
    setItems([
      'one', 'two', 'three', 'four', 'five'
    ])
  }, [])

  const appendChild = () => {
    setChild(<Child />)
  }

  return (
    <div>
      {items.map(item => {
        return (
          <div
            id={item}
            onClick={appendChild}
          >
            {item}
            {child}
          </div>
        )
      })}
    </div>
  )
}

export default Parent

调整方案 #

核心思路是记录被点击的目标id，而不是直接存Child组件：

• 把原来的child状态换成activeItemId，用来记录哪个div被点击了，初始值设为null。
• 修改appendChild函数，让它接收当前item的id作为参数，点击时把这个id存到activeItemId里。
• 循环渲染时，只在当前item的id和activeItemId匹配的div里渲染Child组件。

修改后的完整代码：

const Child = () => {
  return (
    <div>Child</div>
  )
}

const Parent = () => {
  const [items, setItems] = useState([])
  // 记录被点击的item id，初始为null表示没有选中
  const [activeItemId, setActiveItemId] = useState(null)

  useEffect(() => {
    setItems([
      'one', 'two', 'three', 'four', 'five'
    ])
  }, [])

  // 接收点击的item id，更新状态
  const appendChild = (itemId) => {
    setActiveItemId(itemId)
  }

  return (
    <div>
      {items.map(item => {
        return (
          <div
            key={item}
            id={item}
            // 点击时传入当前item的id
            onClick={() => appendChild(item)}
          >
            {item}
            // 只有当前item id和activeItemId匹配时，才渲染Child
            {activeItemId === item && <Child />}
          </div>
        )
      })}
    </div>
  )
}

export default Parent

额外补充：如果需要支持点击同一个div切换显示/隐藏Child，可以把appendChild改成这样：

const appendChild = (itemId) => {
  setActiveItemId(prev => prev === itemId ? null : itemId)
}

内容的提问来源于stack exchange，提问作者ckingchris