如何在React中为表单标签生成唯一ID？

Question

我有带有labels的表单元素，我希望有唯一的ID将labels链接到带有htmlFor属性的元素。大概是这样的：

React.createClass({
    render() {
        const id = ???;
        return (
            <label htmlFor={id}>My label</label>
            <input id={id} type="text"/>
        );
    }
});

我以前是根据这个来生成ID的。_rootNodeID，但自从React 0.13之后就不可用了。现在最好和/或最简单的方法是什么？

Answer 1

从2019年4月4日起，这似乎可以通过React Hooks’useState实现：

import React, { useState } from 'react'
import uniqueId from 'lodash/utility/uniqueId'

const Field = props => {
  const [ id ] = useState(uniqueId('myprefix-'))

  return (
    <div>
      <label htmlFor={id}>{props.label}</label>
      <input id={id} type="text"/>
    </div>
  )      
}

export default Field

据我所知，您忽略了数组分解中允许您更新id的第二个数组项，现在您得到了一个在组件生命周期内不会再次更新的值。

id的值将是myprefix-

function gen4() {
  return Math.random().toString(16).slice(-4)
}

function simpleUniqueId(prefix) {
  return (prefix || '').concat([
    gen4(),
    gen4(),
    gen4(),
    gen4(),
    gen4(),
    gen4(),
    gen4(),
    gen4()
  ].join(''))
}

或者看看我在这里发布的库：https://github.com/rpearce/simple-uniqueid.还有数百或数千个其他独特的身份信息，但是有前缀的洛蒂什的uniqueId应该足以完成这项工作。

感谢@Huong Hk为我指出初始状态，其总和是您可以将函数传递到useState，该函数将仅在初始装载时运行。

// before
const [ id ] = useState(uniqueId('myprefix-'))

// after
const [ id ] = useState(() => uniqueId('myprefix-'))

Answer 2

这个解决方案对我来说很好。

utils/newid.js：

let lastId = 0;

export default function(prefix='id') {
    lastId++;
    return `${prefix}${lastId}`;
}

我可以这样使用它：

import newId from '../utils/newid';

React.createClass({
    componentWillMount() {
        this.id = newId();
    },
    render() {
        return (
            <label htmlFor={this.id}>My label</label>
            <input id={this.id} type="text"/>
        );
    }
});

但它在同构应用程序中不起作用。

2015年8月17日增补。您可以使用lodash中的uniqueId，而不是自定义newId函数。

2016年1月28日更新。最好在组件willmount中生成ID。

Answer 3

id应该放在 组件将安装 （2018年更新）构造函数，而非渲染。将其放入render将不必要地重新生成新ID。

如果使用下划线或lodash，则会有一个uniqueId函数，因此生成的代码应该类似于：

constructor(props) {
    super(props);
    this.id = _.uniqueId("prefix-");
}

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

2019年更新：

import React, { useState } from 'react';
import _uniqueId from 'lodash/uniqueId';

const MyComponent = (props) => {
  // id will be set once when the component initially renders, but never again
  // (unless you assigned and called the second argument of the tuple)
  const [id] = useState(_uniqueId('prefix-'));
  return (
    <div>
      <input id={id} type="checkbox" />
      <label htmlFor={id}>label</label>
    </div>
  );
}