react使用antdeaign循环动态渲染Select的Option

Select下拉选择数据在网站中是常见的选择方式,通过select可以极大便捷及限制性的选择数据。

那么在react中我们可以如何实现使用select选择数据呢?

本篇文章就来介绍在react中如何进行动态数据渲染select选择项。

import { useState,useEffect } from "react";
import React from 'react';
import { Select } from "antd";
export default function overviewPage() {
const { Option } = Select;
const list = [
{id:1,name:'测试1'},
{id:2,name:'测试2'},
{id:3,name:'测试3'},
]
return (
<div className="base_page">
<Select placeholder="请选择">
{
list.map((item, index) => {
return <Option value={item.id}>{item.name}</Option>
})
}
</Select>
</div>
);
}

通过上述即可实现动态获取select的数据进行动态渲染。

六月初字帖坊小程序 你想要的字帖模板及工具,这里都有!