Question

因此，HTML存在一个尴尬的问题，要使label与input一起使用，它们需要通过匹配的id / for进行链接（由React重命名为{ {1}}）对。

以下是一些带有更改句柄等的简化代码，已跳过：

htmlFor

是否有任何合理的方式来生成这些ID？有一些选择，但所有选择似乎都很尴尬：

始终传递唯一的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>; } }-但这意味着不仅要使用此组件，而且每个父母，祖父母等也要使用唯一的idkey。
使用idkey生成它们-使得Math.random()不确定，感觉不对。
在创建/安装组件时，使用render()生成随机密钥，因此Math.random()本身就是确定性的。
只需将整个容器变成render()并稍微重写一下CSS即可使其工作。
完全不使用<label>而不使用<label>，而是使用某种for处理程序来查找具有DOM API的同级onClick……在基于jQuery的情况下这非常简单代码，但是在React中相当混乱。

这些解决方案之一实际上是标准做法吗？我还有其他更好的东西吗？

Answer 1

根据your comment，看来id可以是任何随机数。
您可以使用名为short-id的库来生成随机ID。

它具有配置ID生成方式的选项，但在您看来，这并不重要

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

React

1 个答案: