使用 JavaScript 符号作为输入/复选框标签标识符

Question

我正在编写一个包装 HTML 复选框元素的组件，以轻松管理标签并使其可访问。我刚刚了解了 JavaScript Symbols，并想知道将它们用作

for

的

label

属性中的唯一标识符是否有任何危害。这是使用 React 的此类组件的代码：

const Checkbox = ({ label }) => {
 const id = Symbol().toString();

 return (
   <div>
     <input type="checkbox" id={id} />
     <label htmlFor={id}>{label}</label>
   </div>
 );
};

Answer 1

你的代码没有多大意义（而且是完全错误的）：

symbol

是ES6以来新的数据类型之一，它只代表一个独特的特征，但它仍然是它本身

当您

.toString()

时，符号将立即强制进入正常字符串状态，并且不再是唯一的。 （

Symbol().toString()

总是结果

"Symbol()"

）：

使用唯一编号：

let index = 1;
const Checkbox = ({ label }) => {
 const id = '_' + (index++).toString(36)

 return (
   <div>
     <input type="checkbox" id={id} />
     <label htmlFor={id}>{label}</label>
   </div>
 );
};