如何在React.js中通过onClick事件添加子元素？

在React里不能像原生JS那样直接操作DOM追加元素，得靠状态驱动渲染来实现。核心思路是用一个数组状态管理要渲染的span列表，点击按钮时往数组里加新项，组件就会自动渲染出对应的span。

完整代码示例（函数组件） #

import { useState } from 'react';

function SpanAdder() {
  // 用数组存储每个span的唯一标识，初始为空数组
  const [spans, setSpans] = useState([]);

  // 点击按钮触发的函数
  const handleAddSpan = () => {
    // 基于当前状态生成新数组，避免直接修改原状态
    setSpans(prevSpans => [...prevSpans, `span-${Date.now()}`]);
  };

  return (
    <div>
      <button onClick={handleAddSpan}>点击添加Span</button>
      {/* 遍历数组渲染所有span */}
      {spans.map(spanKey => (
        <span key={spanKey} style={{ marginLeft: '8px', color: '#2c3e50' }}>
          新增的Span元素
        </span>
      ))}
    </div>
  );
}

export default SpanAdder;

关键细节说明 #

• 状态管理：用useState创建spans数组，每点击一次按钮就往数组里添加一个唯一标识（这里用时间戳保证唯一性）。
• 状态更新：使用函数式更新（prevSpans => [...]），确保每次更新都是基于最新的状态值，避免异步更新导致的问题。
• 列表渲染：用map遍历数组生成span元素，必须给每个span加唯一的key属性，这是React列表渲染的要求，能提升渲染效率。

自定义span内容的扩展 #

如果需要每个span显示不同的内容，可以修改状态存储的数据：

const handleAddSpan = () => {
  // 存储span的文本内容，比如按序号生成
  setSpans(prev => [...prev, `第${prev.length + 1}个自定义Span`]);
};

// 渲染时直接使用存储的文本
{spans.map((text, index) => (
  // 这里如果没有唯一ID，临时用index当key（注意：数组顺序不变时才推荐）
  <span key={index} style={{ marginLeft: '8px' }}>
    {text}
  </span>
))}

内容的提问来源于stack exchange，提问作者Manik Islam Mahi