如何使我的 React 组件动态化？答案

【问题标题】：How can I make my React component dynamic?如何使我的 React 组件动态化？
【发布时间】：2021-08-09 23:17:38
【问题描述】：

目前，有一个组件基本上被复制了 4 次。我想让它更抽象，简单地渲染4次，每次都传入动态数据。传递给每个组件的数据是状态挂钩。

以此为目标，我能否在实施方面获得一些帮助？

这是父组件调用的样子：

  const [allBlueItems, setAllBlueItems] = useState([]);
  const [selectedBlueItems, setSelectedBlueItems] = useState([]);
  const [allRedItems, setAllRedItems] = useState([]);
  const [selectedRedItems, setSelectedRedItems] = useState([]);

    <BlueSelection
      allBlueItems={allBlueItems}
      selectedBlueItems={setSelectedBlueItems}
      setSelectedBlueItems={selectedBlueItems}
    />

    <RedSelection
      allRedItems={allRedItems}
      selectedRedItems={setSelectedRedItems}
      setSelectedRedItems={selectedRedItems}
    />

然后，ItemSelection 组件使用这些作为 props 传入的 useState 值来渲染数据，并相应地更新状态：

const BlueSelection = ({ allBlueItems, selectedBlueItems, setSelectedBlueItems }) => {

  useEffect(() => {
      setSelectedBlueItems([]);
    }
  }, []);

然后我重复自己并实现完全相同的代码来处理 RedItem

const RedSelection = ({ allRedItems, selectedRedItems, setSelectedRedItems }) => {

  useEffect(() => {
      setSelectedRedItems([]);
    }
  }, []);

【问题讨论】：

我没有看到任何重复的代码来使更抽象。向我们展示你是如何重复自己的，也许我们可以帮助你想出更好的东西。
好的，我更新了。谢谢
将状态钩子作为这样的道具传递似乎是个坏主意。你想达到什么目的？
如果它们都是相同的组件逻辑，那么声明一个并为它们提供标识就足够了吗？到目前为止，我看到的唯一区别是颜色是您称为选择组件的特定“实例”的名称的一部分。
@ThePerplexedOne 我正在尝试跨组件共享状态

标签： reactjs react-redux react-hooks

【解决方案1】：

重构

export default const Selection = () => {
     const [allItems, setAllItems] = useState([]);
      const [selectedItems, setSelectedItems] = useState([]);
    
return (
        <Selection
          allItems={allItems}
          selectedItems={setSelectedItems}
          setSelectedItems={selectedItems}
        />)}

在任何你需要的地方导入它......

import Selection as RedSelection from ...
import Selection as BlueSelection from...

【讨论】：