在 react 中，`
React 的 <select> 是受控组件，其显示值完全由 value prop 决定，而非 DOM 的 selected 属性。这意味着：
- 即使你在 <Option value="red" selected> 中添加 selected，React 会忽略它；
- 若 selectState 初始值为 undefined 或空字符串，<p>{selectState}</p> 将显示为空，且下拉框可能呈现空白或浏览器默认行为（不可靠）；
- 正确做法是显式初始化 state 为首个选项的 value（如 "red"），确保 UI 与状态从一开始就一致。
✅ 正确实现示例：
import { useState } from 'react';
function ColorSelector() {
const [selectState, setSelectState] = useState("red"); // ✅ 初始化为默认值
return (
<div>
<p>当前选中颜色：<strong>{selectState}</strong></p>
<select
id="mySelect"
value={selectState}
onChange={(e) => setSelectState(e.target.value)}
>
<option value="red">Red</option>
<option value="black">Black</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
</select>
</div>
);
}
export default ColorSelector;⚠️ 注意事项：
- 使用原生 <select> 和 <option>（非自定义组件如 Select/Option），除非你确认这些封装组件支持受控模式并正确转发 value 和 onChange；
- 避免混用 selected 属性与受控逻辑——React 会覆盖它；
- 若默认值需动态获取（如来自 API 或 localStorage），可用 useEffect + useState 初始化，但首次渲染仍需保证 state 有确定初值（例如先设为 null，再异步更新，同时配合 loading 状态）；
- 对于 TypeScript 用户，建议为 useState 添加类型注解：useState<"red" | "black" | "blue" | "yellow">("red")，提升类型安全性。
总结：React 中下拉框的“默认选中”不是靠 HTML 属性驱动，而是靠 state 初始化值与 option 的 value 严格匹配。只要 useState("red") 与 <option value="red"> 一致，首次渲染时 <p>{selectState}</p> 就会立即显示 "red"，下拉框也会高亮第一项——简洁、可靠、符合 React 数据流原则。
