javascript - 如何克隆 React 组件并保存其状态

Question

我需要克隆组件并将其插入到当前组件中。我能够做到这一点，但是当我克隆组件时，前一个组件中的值被清除。我需要保留前一个组件中的值，并将新克隆组件中的值留空。我怎样才能做到这一点？

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

const formBlocks = [
  {
    Component: FirstBlock,
    props: {
      title: 'first block',
    },
    id: 1,
  },
  {
    Component: SecondBlock,
    props: {
      title: 'second block',
    },
    id: 2,
  },
];

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

  return (
    <>
      {formItems.map(({ Component, props, id }, index) => {
        const cloneBlock = () =>
          setFormItems((formItems) => {
            const newFormItems = [...formItems];
            newFormItems.splice(index + 1, 0, {
              Component,
              props,
              id: Date.now(),
            });
            return newFormItems;
          });

        return <Component {...props} key={id} cloneBlock={cloneBlock} />;
      })}
    </>
  );
};

export default Form;

标签： javascriptreactjsreact-reduxreact-hooks