用Antd Radio组件循环显示单选框

如果你想使用 Ant Design 中的 Radio 组件来循环显示单选框，你可以利用 JavaScript 的 map 方法来遍历选项并生成相应的 Radio 组件。下面是一个示例：

import React, { useState } from 'react';
import { Radio } from 'antd';

function Modal() {
  const options = ['选项 1', '选项 2', '选项 3'];
  const [selectedOption, setSelectedOption] = useState('');

  const handleOptionChange = (event) => {
    setSelectedOption(event.target.value);
  };

  return (
    <div>
      <h2>选择一个选项：</h2>
      <Radio.Group onChange={handleOptionChange} value={selectedOption}>
        {options.map((option, index) => (
          <Radio key={index} value={option}>
            {option}
          </Radio>
        ))}
      </Radio.Group>
    </div>
  );
}

export default Modal;

在这个例子中，我们首先定义了一个选项数组 `options`，其中包含了要显示的选项。然后，我们使用 `map` 方法遍历 `options` 数组，并为每个选项生成一个 Radio 组件。在循环过程中，我们为每个 Radio 设置了一个唯一的 `key` 属性，并将选项值作为 `value` 属性传递给 Radio 组件。最后，我们将 Radio.Group 组件包裹在循环中，设置其 `onChange` 和 `value` 属性来跟踪和更新选中的选项。

请确保在使用之前先安装 Ant Design 包。你可以通过运行以下命令来安装 Ant Design：

npm install antd

希望这可以帮助到你！