如何克隆React组件并保留原组件状态、新克隆组件状态为空？

问题原因 #

导致你遇到的问题主要有两个核心原因：

1. 原有组件输入值清空：你的表单状态存放在子组件内部私有state中，父组件触发setState重渲染时，如果触发子组件意外卸载重挂载（比如diff算法判定组件需要更新替换、key不稳定），子组件内部state就会被清空。另外你把cloneBlock函数定义在map回调中，每次渲染都会生成新的函数引用，也会增加子组件不必要的重渲染概率。
2. 克隆组件无法为空：你克隆时直接复用了原有组件的props，如果props中包含用户输入相关的属性，新组件就会继承原有值，达不到空状态的要求。

修复步骤 #

• 状态提升：把所有表单项的状态统一放到父组件的formItems中管理，避免子组件私有state丢失。
• 抽离组件模板：单独维护每个组件的初始默认配置，克隆时从模板生成新组件，保证新组件为空状态。
• 优化渲染逻辑：把克隆函数提到map外部用useCallback缓存，使用自增ID替代Date.now()避免key重复，保证组件key稳定。

完整修复代码 #

import FirstBlocks from './FirstBlocks';
import SecondBlock from './SecondBlock';
import { useState, useCallback } from 'react';

// 抽离组件初始模板，克隆时用这个模板生成新块，保证空状态
const blockTemplates = [
  {
    Component: FirstBlocks,
    defaultProps: {
      title: 'first block',
    },
    type: 'first'
  },
  {
    Component: SecondBlock,
    defaultProps: {
      title: 'second block',
    },
    type: 'second'
  }
];

// 初始渲染的块配置
const initialFormBlocks = [
  {
    ...blockTemplates[0],
    id: 1,
    // 每个块的表单值单独存储，状态提升到父组件
    formValue: {}
  },
  {
    ...blockTemplates[1],
    id: 2,
    formValue: {}
  }
];

// 自增ID生成器，避免Date.now()快速点击生成重复ID的问题
let autoId = 3;

const Form = () => {
  const [formItems, setFormItems] = useState(initialFormBlocks);

  // 克隆函数提到外部缓存，避免每次渲染生成新的函数引用
  const cloneBlock = useCallback((index, blockType) => {
    setFormItems(prev => {
      // 从模板生成全新的空块，不继承原有块的状态
      const template = blockTemplates.find(t => t.type === blockType);
      const newBlock = {
        ...template,
        id: autoId++,
        formValue: {}
      };
      const newItems = [...prev];
      newItems.splice(index + 1, 0, newBlock);
      return newItems;
    });
  }, []);

  // 表单项值更新方法，传给子组件实现受控逻辑
  const handleValueChange = useCallback((blockId, field, value) => {
    setFormItems(prev => prev.map(item => {
      if (item.id === blockId) {
        return {
          ...item,
          formValue: {
            ...item.formValue,
            [field]: value
          }
        };
      }
      return item;
    }));
  }, []);

  return (
    <>
      {formItems.map(({ Component, defaultProps, id, formValue, type }, index) => {
        return (
          <Component 
            {...defaultProps} 
            key={id} 
            formValue={formValue}
            onValueChange={(field, value) => handleValueChange(id, field, value)}
            cloneBlock={() => cloneBlock(index, type)} 
          />
        );
      })}
    </>
  );
};

export default Form;

子组件适配示例 #

子组件需要改成受控模式，从props拿值并通过回调更新父组件状态，以FirstBlocks为例：

const FirstBlocks = ({ title, formValue, onValueChange, cloneBlock }) => {
  return (
    <div>
      <h3>{title}</h3>
      <input 
        value={formValue.input1 || ''} 
        onChange={(e) => onValueChange('input1', e.target.value)} 
        placeholder="请输入内容"
      />
      <button onClick={cloneBlock}>克隆当前块</button>
    </div>
  )
}
export default FirstBlocks;

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