Come generare ID univoci per le etichette dei moduli in React?

Ho elementi del modulo con labels e voglio avere ID univoci per collegare labels agli elementi con htmlForattributo. Qualcosa come questo:

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

Generavo ID basati su this._rootNodeIDma non è disponibile da React 0.13. Qual è il modo migliore e / o più semplice per farlo ora?

Questa soluzione funziona bene per me.

utils/newid.js:

let lastId = 0;

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

E posso usarlo in questo modo:

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

Ma non funzionerà nelle app isomorfe.

Aggiunto il 17.08.2015 . Invece della funzione newId personalizzata puoi usare uniqueId da lodash.

Aggiornato il 28.01.2016 . È meglio generare ID in componentWillMount.

L'id deve essere inserito all'interno di componentWillMount (aggiornamento per il 2018) constructor, non render. Mettendolo dentrorender rigenererai inutilmente nuovi ID.

Se stai usando il trattino basso o lodash, c'è una uniqueIdfunzione, quindi il tuo codice risultante dovrebbe essere simile a:

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

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

A partire dal 04-04-2019, questo sembra poter essere realizzato con i 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

A quanto ho capito, ignori il secondo elemento dell'array nella distruzione dell'array che ti consentirebbe l'aggiornamento id, e ora hai un valore che non verrà aggiornato di nuovo per la vita del componente.

Il valore di idsarà myprefix-<n>dove <n>è un valore intero incrementale restituito uniqueId. Se non è abbastanza unico per te, prendi in considerazione l'idea di crearne uno tuo

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

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

oppure dai un'occhiata alla libreria che ho pubblicato qui: https://github.com/rpearce/simple-uniqueid . Ci sono anche centinaia o migliaia di altri ID univoci là fuori, ma lodash uniqueIdcon un prefisso dovrebbe essere sufficiente per portare a termine il lavoro.

Aggiornamento del 10-07-2019

Grazie a @Huong Hk per avermi indicato lo stato iniziale pigro degli hook , la cui somma è che è possibile passare una funzione useStateche verrà eseguita solo sul mount iniziale.

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

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

È possibile utilizzare una libreria come node-uuid per assicurarsi di ottenere ID univoci.

Installa usando:

npm install node-uuid --save

Quindi nel componente di reazione aggiungere quanto segue:

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

Spero che questo sia utile a chiunque stia cercando una soluzione universale / isomorfa, dal momento che la questione del checksum è ciò che mi ha portato qui in primo luogo.

Come detto sopra, ho creato una semplice utility per creare in sequenza un nuovo ID. Poiché gli ID continuano ad aumentare sul server e ricominciare da 0 nel client, ho deciso di reimpostare l'incremento a ogni avvio dell'SSR.

// utility to generate ids
let current = 0

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

export function resetIdCounter () { current = 0 }

E quindi nel costruttore del componente root o componentWillMount, chiama il reset. Questo essenzialmente reimposta l'ambito JS per il server in ciascun rendering del server. Nel client non ha (e non dovrebbe) avere alcun effetto.

Per i soliti usi di labele input, è più semplice avvolgere l'input in un'etichetta come questa:

import React from 'react'

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

Inoltre, nelle caselle di controllo / pulsanti radio è possibile applicare il riempimento all'elemento radice e ottenere comunque il feedback del clic sull'input.

Ho trovato una soluzione semplice come questa:

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

Altro modo semplice con dattiloscritto:

static componentsCounter = 0;

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

Creo un modulo generatore uniqueId (Typescript):

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

export default uniqueId;

E usa il modulo superiore per generare ID univoci:

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

Non utilizzare affatto ID se non è necessario, ma avvolgere l'input in un'etichetta come questa:

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

Quindi non dovrai preoccuparti di ID univoci.