React InputSelect组件handleInput关联值选择遇语法错误求助

错误原因 #

你在<option>标签中使用了不符合JSX规范的属性写法：

<option value={item.member_ship_type} {handleInput.member_ship_type == item.member_ship_type ? 'selected' : ''} key={item.member_ship_type}>

这种直接在属性位置插入条件表达式的方式，会让React误以为你要使用展开运算符（...），但实际写法不符合语法规则，因此抛出了Unexpected token, expected "..."的错误。

修复方案 #

JSX中设置HTML属性必须遵循属性名={表达式}的格式，对于selected这类布尔属性，直接传入布尔值即可：

修复后的InputSelect组件代码 #

'use client';

import { Select } from 'flowbite-react';

let InputSelect = ({ options, handleInput, name, id, handleChange }) => {
    return (
        <div className="max-w-screen-md">
            <Select id={id} name={name} value={handleInput.member_ship_type} onChange={handleChange}>
                {options.map((item) => (
                    <option 
                        value={item.member_ship_type} 
                        selected={handleInput.member_ship_type === item.member_ship_type}
                        key={item.member_ship_type}
                    >
                        {item.label}
                    </option>
                ))}
            </Select>
        </div>
    );
}

export default InputSelect;

额外优化说明 #

Flowbite的<Select>组件已经通过value={handleInput.member_ship_type}控制选中项，内部会自动匹配对应的<option>，所以你可以完全去掉<option>上的selected属性，代码会更简洁：

<option 
    value={item.member_ship_type} 
    key={item.member_ship_type}
>
    {item.label}
</option>

修改后即可解决语法错误，同时正确实现选中与handleInput关联值的需求。

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