React中如何为可复用切换框组件及其左右部分生成唯一ID

问题根源 #

你当前的代码存在两个冲突点：

1. 左右单选框的ID是硬编码的固定值，所有组件实例复用同一套ID必然重复
2. 单选框的name属性也是固定值，会导致多个ToggleBar的单选框被识别为同一组，无法独立切换

可行方案 #

方案1：父组件传入唯一标识（可控性更高） #

适合需要自行管理实例ID的场景，比如点击新增按钮时由父层生成自增/唯一标识传给每个ToggleBar：

import React from 'react';

function ToggleBar({ nameLeft, nameRight, onChange, barId }) {
    // 拼接左右单选框唯一ID
    const toggleOnId = `${barId}-on`;
    const toggleOffId = `${barId}-off`;
    // 拼接独立的radio组名，保证各组件实例的单选逻辑互不干扰
    const radioGroupName = `${barId}-toggle`;

    return (
        <div>
            <input
                id={toggleOnId}
                className="toggle toggle-left"
                onChange={onChange}
                name={radioGroupName}
                value="false"
                type="radio"
                checked
            />
            <label htmlFor={toggleOnId} className="btnn-toggle">
                {nameLeft}
            </label>
            <input
                id={toggleOffId}
                className="toggle toggle-right"
                onChange={onChange}
                name={radioGroupName}
                value="true"
                type="radio"
            />
            <label htmlFor={toggleOffId} className="btnn-toggle">
                {nameRight}
            </label>
        </div>
    );
}

父组件新增逻辑示例：

const [toggleList, setToggleList] = useState([]);
// 新增切换框实例的逻辑
const addToggle = () => {
    // 用时间戳生成唯一ID，也可以用自增数字等其他方案
    const newBarId = `toggle-${Date.now()}`;
    setToggleList([...toggleList, { 
        id: newBarId, 
        nameLeft: '启用', 
        nameRight: '禁用' 
    }])
}

// 渲染逻辑
{toggleList.map(item => (
    <ToggleBar 
        key={item.id} 
        barId={item.id} 
        nameLeft={item.nameLeft} 
        nameRight={item.nameRight} 
        onChange={/* 你的切换处理函数 */} 
    />
))}

方案2：使用React内置useId Hook（无需手动维护ID） #

React 18及以上版本提供的useId专门用于生成服务端渲染、客户端渲染一致的唯一ID，不需要父组件传参，组件内部可自行生成，使用更简便：

import React, { useId } from 'react';

function ToggleBar({ nameLeft, nameRight, onChange }) {
    // 生成当前组件实例独有的基础ID
    const baseId = useId();
    const toggleOnId = `${baseId}-on`;
    const toggleOffId = `${baseId}-off`;
    const radioGroupName = `${baseId}-toggle`;

    return (
        <div>
            <input
                id={toggleOnId}
                className="toggle toggle-left"
                onChange={onChange}
                name={radioGroupName}
                value="false"
                type="radio"
                checked
            />
            <label htmlFor={toggleOnId} className="btnn-toggle">
                {nameLeft}
            </label>
            <input
                id={toggleOffId}
                className="toggle toggle-right"
                onChange={onChange}
                name={radioGroupName}
                value="true"
                type="radio"
            />
            <label htmlFor={toggleOffId} className="btnn-toggle">
                {nameRight}
            </label>
        </div>
    );
}

该方案无需父组件做额外处理，直接渲染多个实例即可，所有ID、单选逻辑天然独立，不会产生冲突。

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