如何正确复制React元素并实现重新渲染？

我想复制页面上的所有元素并重新渲染，通过代码管理修改子元素的位置，但目前代码虽然能收集到元素集合，却没有任何返回结果。我的代码如下：

import React, { useState, useEffect, useRef } from "react";

const renderElment = (child) => {
  return <div ref={(ref) => ref.appendChild(child)}></div>;
};

export default function CopyPage() {
  const ref = React.createRef();
  const [components, setComponents] = useState([]);

  useEffect(() => {
    if (ref.current) {
      const children = [];
      for (const child of ref.current.children) {
        const clone = React.cloneElement(child, {}, null);
        children.push(clone);
      }
      setComponents(children);
    }
  }, [ref]);

  if (components.length > 0) {
    components.map((child) => {
      return renderElment(child);
    });
  } else {
    return (
      <div ref={ref}>
        <div title="Title 1">
          <p>XDZ</p>
        </div>
        <div title="Title 2">
          <p>XDZ</p>
          <p>XDZ</p>
        </div>
        <div title="Title 3">
          <p>XDZ</p>
          <p>XDZ</p>
          <p>XDZ</p>
        </div>
      </div>
    );
  }
}

问题分析 #

1. 无返回值导致页面空白：当components.length > 0时，代码仅执行了components.map()但未返回该结果，React组件必须返回React元素或null，此处没有输出任何内容，所以页面无渲染结果。
2. DOM节点与React元素混淆：React.cloneElement只能克隆React元素，你传入的child是原生DOM节点，属于用法错误，无法生成有效的React元素。
3. 手动操作DOM不符合React逻辑：renderElment里用ref.appendChild(child)直接操作DOM，违背了React通过JSX描述UI的渲染机制，容易导致状态与DOM不同步。

修复后的代码 #

import React, { useState } from "react";

// 定义原始子元素的数据源
const originalChildren = [
  <div key="1" title="Title 1">
    <p>XDZ</p>
  </div>,
  <div key="2" title="Title 2">
    <p>XDZ</p>
    <p>XDZ</p>
  </div>,
  <div key="3" title="Title 3">
    <p>XDZ</p>
    <p>XDZ</p>
    <p>XDZ</p>
  </div>
];

export default function CopyPage() {
  const [components, setComponents] = useState([]);

  // 可修改此方法调整子元素位置，比如反转、排序等
  const copyAndReorderElements = () => {
    // 克隆原始元素并调整位置（示例为反转）
    const clonedElements = [...originalChildren].reverse().map(child => 
      React.cloneElement(child, { key: `cloned-${child.key}` })
    );
    setComponents(clonedElements);
  };

  return (
    <div>
      {components.length > 0 ? (
        <div>
          <h3>复制并重新排序后的元素</h3>
          {components}
        </div>
      ) : (
        <div>
          <h3>原始元素</h3>
          {originalChildren}
          <button onClick={copyAndReorderElements}>复制并反转元素</button>
        </div>
      )}
    </div>
  );
}

关键修改说明 #

• 将原始子元素定义为React元素数组作为数据源，避免从DOM中读取节点，保证能正确克隆和操作。
• 确保组件在所有分支都有明确的返回值，解决页面空白问题。
• 通过React状态管理控制渲染逻辑，不再手动操作DOM，符合React声明式渲染原则。
• 添加示例按钮演示位置调整功能，可根据需求修改copyAndReorderElements内的逻辑实现不同的位置调整。

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