Как создать уникальные идентификаторы для меток формы в React?

у меня есть форма с элементами labels и я хочу иметь уникальные идентификаторы для ссылки labelS для элементов с . Что-то вроде этого:--6--> 

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

я использовал для генерации идентификаторов на основе this._rootNodeID но он недоступен с момента React 0.13. Каков наилучший и / или самый простой способ сделать это сейчас?

88
reactjs

7 ответов

такое решение отлично работает для меня.

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

но он не будет работать в изоморфных приложениях.

добавлен 17.08.2015. Вместо пользовательской функции newId вы можете использовать уникальный идентификатор от лодашь.

обновление 28.01.2016. Лучше генерировать ID в componentWillMount.

66

идентификатор должен быть помещен внутрь componentWillMount, а не render. Положить его в render будет повторно генерировать новые идентификаторы излишне.

если вы используете подчеркивание или lodash, есть uniqueId функция, поэтому ваш результирующий код должен быть чем-то вроде:

componentWillMount() {
    const id = _.uniqueId("prefix-");
    this.id = id;
}

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

есть много решений "клейкой ленты". Один https://github.com/DelvarWorld/Unique-Id-Mixin

4

вы можете использовать библиотеку, такую как узел-uuid для этого убедитесь, что вы получаете уникальные идентификаторы.

установить с помощью:

npm install node-uuid --save

затем в вашем компоненте react добавьте следующее:

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

надеюсь, это полезно для тех, кто ищет универсальное/изоморфное решение, поскольку проблема контрольной суммы-это то, что привело меня сюда в первую очередь.

Как сказано выше, я создал простую утилиту для последовательного создания нового идентификатора. Поскольку идентификаторы продолжают увеличиваться на сервере и начинаются с 0 в клиенте, я решил сбросить приращение каждый запуск SSR.

// utility to generate ids
let current = 0

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

export function resetIdCounter () { current = 0 }

а затем в конструкторе корневого компонента или componentWillMount вызовите сброс. Это по существу сбрасывает область JS для сервера в каждом рендеринге сервера. В клиенте это не имеет (и не должно иметь) никакого эффекта.

1

Я предпочитаю просто дайте react auto генерирует идентификатор для меня. Я не совсем уверен, что это правильное использование, поскольку подчеркивание обычно является частным, но оно делает трюк.

этого._reactInternalInstance._rootNodeID

render () {
  <button 
    id={this._reactInternalInstance._rootNodeID}>
    {this.props.children}
    {/*tooltip */}
    <div 
      htmlFor={this._reactInternalInstance._rootNodeID}
      className="mdl-tooltip mdl-tooltip--large">
      {this.props.children}
    </div>
  </button>
}

вот пример использования React для автоматического создания идентификаторов для компонентов, чтобы MDL (Material Design Lite ) мог нацелиться на родительскую подсказку компоненты

пример подсказки React MDL

-1

Не используйте идентификаторы вообще, если вам это не нужно, вместо этого оберните вход в метку следующим образом:

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

тогда вам не нужно будет беспокоиться об уникальных идентификаторах.

-1