Next.js 13中如何在className中传参生成Radio按钮？

云原生阿岚

2026-7-17

解决方案

你的问题出在没有正确用模板字符串插入动态变量，同时还有两个容易忽略的细节：React循环元素需要唯一key，单选按钮要设置统一的name属性才能互斥。以下是修正后的完整实现：

<fieldset>
    <legend>Some Radio Buttons</legend>
    {names.map((name: string) => (
        // 加上唯一key，确保name列表无重复
        <div key={name} className="flex items-center gap-2">
            {/* 用模板字符串插入name，添加统一name属性实现单选互斥 */}
            <input 
                id={name} 
                name="radio-group"
                className={`peer/${name} appearance-none absolute h-0 w-0 opacity-0`} 
                type="radio"
            />
            {/* 同样用模板字符串拼接peer-checked的标识符 */}
            <label 
                htmlFor={name} 
                className={`rounded-button peer-checked/${name}:bg-indigo-500 px-4 py-2 cursor-pointer transition-colors`}
            >
                <span>{name}</span>
            </label>
        </div>
    ))}
</fieldset>

关键说明：

动态类名拼接：必须用ES6模板字符串（`包裹）插入name变量，JS才会把变量值替换进去，生成peer/Alice、peer-checked/Alice:bg-indigo-500这类有效Tailwind类名。
单选互斥逻辑：给所有input设置相同的name属性（比如name="radio-group"），同一组的单选按钮才会互斥选中。
React循环key：map循环的元素必须加唯一key，这里用name作为key的前提是列表内name无重复，若有重复可改用索引或其他唯一标识。
Tailwind兼容性：只要动态生成的类名是静态可预测的（比如你的字符串列表），就不会影响Tailwind的编译解析。