如何在React的onClick函数中动态生成新按钮？

在React里不能直接手动创建DOM元素，得靠状态驱动视图来实现这个需求，具体步骤如下：

1. 新增状态存储动态按钮数据 #

首先用useState定义一个数组状态，用来保存要生成的按钮信息（比如每个按钮的名称）：

import { useState } from 'react';

// 组件内部
const [relayButtons, setRelayButtons] = useState<string[]>([]);

2. 修改addRelay函数，添加新按钮数据 #

当点击原按钮且relayname不为空时，把当前的relayname追加到relayButtons数组里：

const addRelay = (e: React.MouseEvent<HTMLButtonElement>) => {
    e.preventDefault();

    // call backend addRelay

    if (relayname !== '') {
        console.log('Relay Name: ' + relayname);
        // 将新按钮的名称添加到状态数组中
        setRelayButtons(prev => [...prev, relayname]);
        setRelayName('');
    }
};

3. 在JSX中渲染动态生成的按钮 #

在组件的渲染部分，遍历relayButtons数组，每一项对应渲染一个按钮：

// 原按钮
<ARButton onClick={addRelay}>Add Relay</ARButton>

// 动态生成的按钮列表
{relayButtons.map((name, index) => (
    <ARButton key={index}>{name}</ARButton>
))}

关键说明 #

• 用key={index}是因为这里按钮名称可能重复，用数组索引作为唯一标识（如果有后端返回的唯一ID，用ID会更规范）。
• 每次点击原按钮，状态数组更新，React会自动重新渲染视图，把新按钮渲染出来。

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