Como gerar IDs exclusivos para rótulos de formulário no React?

Eu tenho elementos de formulário com labels e quero ter IDs exclusivos para vincular labels a elementos com htmlForatributo. Algo assim:

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

Eu costumava gerar IDs com base, this._rootNodeIDmas não está disponível desde o React 0.13. Qual é a melhor e / ou mais simples maneira de fazer isso agora?

Essas soluções funcionam bem para mim.

utils/newid.js:

let lastId = 0;

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

E eu posso usá-lo assim:

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"/>
        );
    }
});

Mas não funcionará em aplicativos isomórficos.

Adicionado 17.08.2015 . Em vez da função newId personalizada, você pode usar uniqueId do lodash.

Atualizado 28.01.2016 . É melhor gerar um ID componentWillMount.

O ID deve ser colocado dentro de componentWillMount (atualização para 2018) constructor, não render. Colocá-lo renderirá gerar novos IDs desnecessariamente.

Se você estiver usando sublinhado ou lodash, há uma uniqueIdfunção; portanto, o código resultante deve ser algo como:

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>
  );
}

Atualização de ganchos de 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>
  );
}

No seguimento de 04-04-2019, isso parece ser possível com o 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

Pelo que entendi, você ignora o segundo item da matriz na desestruturação da matriz que permitiria a atualização ide agora você tem um valor que não será atualizado novamente durante a vida útil do componente.

O valor de idserá myprefix-<n>onde <n>é um valor inteiro incremental retornado uniqueId. Se isso não for único o suficiente para você, considere fazer o seu próprio

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

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

ou confira a biblioteca que publiquei aqui: https://github.com/rpearce/simple-uniqueid . Existem também centenas ou milhares de outras coisas únicas de identificação por aí, mas os lodashs uniqueIdcom um prefixo devem ser suficientes para fazer o trabalho.

Atualização 2019-07-10

Agradeço ao @Huong Hk por me indicar um estado inicial lento , cuja soma é que você pode passar uma função para useStateque só seja executada na montagem inicial.

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

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

Você pode usar uma biblioteca como o node-uuid para garantir que você obtenha IDs exclusivos.

Instale usando:

npm install node-uuid --save

Em seguida, no seu componente de reação, adicione o seguinte:

import {default as UUID} from "node-uuid";
import {default as React} from "react";

export default class MyComponent extends React.Component {   
  componentWillMount() {
    this.id = UUID.v4();
  }, 
  render() {
    return (
      <div>
        <label htmlFor={this.id}>My label</label>
        <input id={this.id} type="text"/>
      </div>
    );
  }   
}

Espero que isso seja útil para quem procura uma solução universal / isomórfica, já que o problema da soma de verificação foi o que me levou aqui em primeiro lugar.

Como dito acima, criei um utilitário simples para criar sequencialmente um novo ID. Como os IDs continuam aumentando no servidor e iniciam novamente a partir de 0 no cliente, decidi redefinir o incremento a cada inicialização do SSR.

// utility to generate ids
let current = 0

export default function generateId (prefix) {
  return `${prefix || 'id'}-${current++}`
}

export function resetIdCounter () { current = 0 }

E, em seguida, no construtor do componente raiz ou componentWillMount, chame a redefinição. Isso redefine essencialmente o escopo JS do servidor em cada renderização do servidor. No cliente, isso não (e não deve) ter nenhum efeito.

Para os usos usuais de labele input, é apenas mais fácil agrupar as entradas em um rótulo como este:

import React from 'react'

const Field = props => (
  <label>
    <span>{props.label}</span>
    <input type="text"/>
  </label>
)      

Também possibilita nas caixas de seleção / botões de opção aplicar preenchimento ao elemento raiz e ainda obter feedback do clique na entrada.

Encontrei uma solução fácil como esta:

class ToggleSwitch extends Component {
  static id;

  constructor(props) {
    super(props);

    if (typeof ToggleSwitch.id === 'undefined') {
      ToggleSwitch.id = 0;
    } else {
      ToggleSwitch.id += 1;
    }
    this.id = ToggleSwitch.id;
  }

  render() {
    return (
        <input id={`prefix-${this.id}`} />
    );
  }
}

Outra maneira simples com o texto datilografado:

static componentsCounter = 0;

componentDidMount() {
  this.setState({ id: 'input-' + Input.componentsCounter++ });
}

Eu crio um módulo gerador uniqueId (Typescript):

const uniqueId = ((): ((prefix: string) => string) => {
  let counter = 0;
  return (prefix: string): string => `${prefix}${++counter}`;
})();

export default uniqueId;

E use o módulo superior para gerar IDs exclusivos:

import React, { FC, ReactElement } from 'react'
import uniqueId from '../../modules/uniqueId';

const Component: FC = (): ReactElement => {
  const [inputId] = useState(uniqueId('input-'));
  return (
    <label htmlFor={inputId}>
      <span>text</span>
      <input id={inputId} type="text" />
    </label>
  );
};     

Não use IDs, se você não precisar, em vez disso, envolva a entrada em um rótulo como este:

<label>
   My Label
   <input type="text"/>
</label>

Então você não precisará se preocupar com IDs únicos.