Html React的标签ID

因此HTML有一个棘手的问题，那就是要使

标签

与

输入

一起工作，它们需要通过一个匹配的

id

/

对

（重命名为React to

htmlFor

）来链接

下面是一些带有更改句柄等的简化代码：

class CheckboxComponent extends Component {
    render() {
      let {selected,name,idkey} = this.props;
      let id = `checkbox-${idkey}`;
      return <div>
        <input type="checkbox" id={id} checked={selected}/>
        <label htmlFor={id}>{name}</label>
      </div>;
  }
}

类CheckboxComponent扩展组件{
render（）{
让{selected，name，idkey}=this.props；
设id=`checkbox-${idkey}`；
返回
{name}
;
}
}

有没有合理的方法来生成这些ID？有一些选择，但所有的选择似乎都很尴尬：

• 一路传递唯一的

  idkey

  ——但这意味着不仅是这个组件，而且每个父母、祖父母等都需要一个唯一的

  idkey

• 使用

  Math.random（）

  生成它们-这使得

  render（）

  不确定，这感觉是错误的
• 当组件被创建/装载时，使用

  Math.random（）

  生成一个随机键，因此

  render（）

  本身将是确定性的
• 只需将整个容器转换为
  ，并稍微重写CSS即可
• 为指定
  不

  ，而使用某种
  onClick
  处理程序来查找具有DOM API的同级
  。。。这在基于jQuery的代码中非常简单，但在React中有点混乱

这些解决方案中有一个实际上是标准实践吗？我是不是错过了更好的东西

根据，似乎

id

可以是任何随机数。
您可以使用一个名为just的库来生成随机ID

它有一个选项来配置如何生成ID，但在您的情况下，这似乎并不重要

从“short id”导入shortid
类CheckboxComponent扩展组件{
render（）{
让{selected，name，idkey}=this.props；
设id=shortid.generate（）；
返回
{name}
;
}
}

如果没有关于所选数据性质的任何信息，很难判断这一点。如果后端中有相应的数据库实体，则可以使用该id。如果复选框是静态呈现的，则可以使用适当的字符串。最后一种方法是使用库生成uuid。不要使用

Math.random（）

！这是一个没有数据库支持的智能表单，整个表单只公开了一些计算。复选框可能会在表单中获得唯一的ID，但整个表单需要一些唯一的密钥，这些密钥需要向下传递很多级别，因为我希望表单的多个副本显示在同一页面上，以便进行比较。如果有多个表单，则也给它们id，并从表单id动态派生输入id，如

${formID}-round values checkbox

或模板字符串中的复选框。相关：-有关钩子，请参阅