antdesign list和radio配合使用

Ant Design（蚂蚁设计体系）是一个基于React的UI库，其中`List`组件用于展示一系列数据项，而`Radio`组件则是单选按钮的组件。当需要在`List`中展示一组可以进行选择的数据，并且每个选项只能被选择一次时，你可以将这两个组件结合起来。

例如，你可能会创建一个`List`，其中每个`ListItem`都有一个关联的`Radio`。用户可以选择列表中的一个项目，这时`Radio`的状态会随着`ListItem`的选择而改变。这通常通过给`Radio`设置一个`value`属性，该值与对应的`ListItem`的某个标识符相匹配，并在`onChange`事件回调中更新状态管理（如Redux、MobX等）来实现。

下面是一个简单的示例代码片段：

import { List, Radio } from 'antd';

const Option = Radio.Option;

function MyComponent() {
  const [selectedOption, setSelectedOption] = React.useState(null);

  const options = [
    { key: 'option1', label: 'Option 1' },
    { key: 'option2', label: 'Option 2' },
    // 更多选项...
  ];

  return (
    <List>
      {options.map(option => (
        <List.Item key={option.key}>
          <Radio value={option.key} onChange={() => setSelectedOption(option.key)}>
            {option.label}
          </Radio>
        </List.Item>
      ))}
      {selectedOption && (
        <p>你选择了: {options.find(option => option.key === selectedOption)?.label}</p>
      )}
    </List>
  );
}

// 使用时记得引入样式
import 'antd/dist/antd.css';