当需要重新排列组件时，如何防止创建组件的新实例？

【问题标题】：how to prevent creating a new instance of a component when they need to be rearranged?当需要重新排列组件时，如何防止创建组件的新实例？
【发布时间】：2022-01-15 23:14:48
【问题描述】：

所以在桌面版本上，组件看起来像这样：

  <div className="parent-comp">
    <div id="child-1" />
    <div id="child-2" />
  </div>

但在移动版本上，事情发生了逆转：

  <div className="parent-comp">
    <div id="child-2" />
    <div id="child-1" />
  </div>

当屏幕尺寸从移动设备变为桌面等时，如何避免重新创建child-1 和child-2？

【问题讨论】：

您可以使用纯 CSS flex 作为父级，order 作为内部 div。

标签： java html css reactjs

【解决方案1】：

您可以声明一个状态来存储 idNum 并实现一个检测屏幕大小并设置适当 idNum 的功能以下是我希望能解决这个问题的尝试：

const [idNum, setIdNum] = useState(1);
    const handleResize = () => {
        if (window.innerWidth > 960) {
            setIdNum(1);
        } else {
            setIdNum(2);
        }
    };
    useEffect(() => {
        handleResize();
    });
    window.addEventListener('resize', handleResize);
    return (
        <div className="parent-comp">
            <div id={`child-${idNum}`} />
            <div id={`child-${idNum === 1 ? 2 : 1}`} />
        </div>
    );

【讨论】：