Comment générer des identifiants uniques pour les étiquettes de formulaire dans React?

J’ai des éléments de formulaire avec label s et je veux avoir des identifiants uniques pour lier label s aux éléments avec l’atsortingbut htmlFor . Quelque chose comme ça:

 React.createClass({ render() { const id = ???; return (   ); } }); 

J’avais l’habitude de générer des identifiants basés sur this._rootNodeID mais il n’est pas disponible depuis React 0.13. Quelle est la meilleure et / ou la plus simple façon de le faire maintenant?

Cette solution fonctionne bien pour moi.

utils/newid.js :

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

Et je peux l’utiliser comme ceci:

 import newId from '../utils/newid'; React.createClass({ componentWillMount() { this.id = newId(); }, render() { return (   ); } }); 

Mais cela ne fonctionnera pas dans les applications isomorphes.

Ajouté le 17.08.2015 . Au lieu de la fonction personnalisée newId, vous pouvez utiliser uniqueId de lodash.

Mis à jour le 28.01.2016 . Il est préférable de générer des identifiants dans componentWillMount .

L’identifiant doit être placé à l’intérieur de componentWillMount , pas du render . Le mettre en render va générer de nouveaux identifiants inutilement.

Si vous utilisez un trait de soulignement ou un lodash, il existe une fonction uniqueId , de sorte que le code qui en résulte devrait ressembler à:

 componentWillMount() { const id = _.uniqueId("prefix-"); this.setState({id: id}); } render() { const id = this.state.id; return ( 
); }

Il existe de nombreuses solutions de “ruban adhésif”. L’un est https://github.com/DelvarWorld/Unique-Id-Mixin

Vous pouvez utiliser une bibliothèque telle que node-uuid pour vous assurer d’obtenir des identifiants uniques.

Installer en utilisant:

npm installer node-uuid –save

Ensuite, dans votre composant de réaction, ajoutez ce qui suit:

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

J’espère que cela sera utile à tous ceux qui recherchent une solution universelle / isomorphe, car le problème de la sum de contrôle est ce qui m’a amené ici en premier lieu.

Comme indiqué ci-dessus, j’ai créé un utilitaire simple pour créer séquentiellement un nouvel identifiant. Comme les identifiants continuent à s’incrémenter sur le serveur et recommencent à partir de 0 dans le client, j’ai décidé de réinitialiser l’incrément au démarrage de SSR.

 // utility to generate ids let current = 0 export default function generateId (prefix) { return `${prefix || 'id'}-${current++}` } export function resetIdCounter () { current = 0 } 

Et puis, dans le constructeur ou le composantWillMount du composant racine, appelez la réinitialisation. Cela réinitialise essentiellement la scope JS du serveur dans chaque rendu de serveur. Dans le client, il n’a pas (et ne devrait pas) avoir d’effet.

Je préfère laisser la réaction automatique générer les identifiants pour moi. Je ne suis pas tout à fait sûr que ce soit correct, car le soulignement est généralement privé mais il fait l’affaire.

this._reactInternalInstance._rootNodeID

 render () {  }