React.js中如何实现点击元素时克隆自身（TypeScript环境）

实现思路 #

要实现点击元素复制自身，核心是用状态维护元素列表，点击时向列表中添加当前元素的副本，再重新渲染整个列表。因为React是单向数据流，子组件不能直接修改父组件状态，所以需要通过回调函数通知父组件添加新元素。

修改后的代码示例 #

1. 调整子组件 Item

给Item添加一个onDuplicate回调属性，点击时触发该回调并传递当前元素的emoji和text：

import React from "react";

interface Props {
  emoji: string;
  text: string;
  // 添加回调函数，用于通知父组件复制当前元素
  onDuplicate: (emoji: string, text: string) => void;
}

const Item = ({ emoji, text, onDuplicate }: Props) => {
  const handleClick = () => {
    // 触发回调，传递当前元素的参数
    onDuplicate(emoji, text);
  };

  return (
    <div className="item" onClick={handleClick}>
      <span className="emoji">{emoji}</span>
      <span className="text">{text}</span>
    </div>
  );
};

export default Item;

2. 创建父组件（比如App）

在父组件中维护元素列表的状态，实现添加元素的逻辑，并渲染所有Item：

import React, { useState } from "react";
import Item from "./Item";

// 复用Item的Props作为列表项的类型
type ItemData = React.ComponentProps<typeof Item>;

const App = () => {
  // 初始化列表，可添加默认元素
  const [items, setItems] = useState<ItemData[]>([
    { emoji: "😊", text: "示例元素", onDuplicate: () => {} } // 这里onDuplicate会在渲染时覆盖
  ]);

  // 处理复制逻辑：向列表中添加当前元素的副本
  const handleDuplicate = (emoji: string, text: string) => {
    setItems(prevItems => [
      ...prevItems,
      { emoji, text, onDuplicate: handleDuplicate }
    ]);
  };

  return (
    <div className="item-list">
      {items.map((item, index) => (
        // 用index作为key（如果有唯一id更好，这里为了简化用index）
        <Item
          key={index}
          emoji={item.emoji}
          text={item.text}
          onDuplicate={handleDuplicate}
        />
      ))}
    </div>
  );
};

export default App;

关键说明 #

• 状态提升：把元素列表的状态放在父组件中，这样所有Item的增删都能统一管理。
• 回调传递：子组件通过onDuplicate回调通知父组件“我要复制自己”，父组件负责更新状态，React会自动重新渲染列表。
• TypeScript类型：复用Item的Props类型定义列表项，保证类型一致性。

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