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

Question

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

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

React.createClass({

    render() {

        const id = ???;

        return (

            <label htmlFor={id}>My label</label>

            <input id={id} type="text"/>

        );

    }

});

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

584 7

reactjs

7 ответов:

Comments

Ничего не найдено.

Artem Sapegin · Accepted Answer · 2016-01-28 15:34:35

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

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 вы можете использовать uniqueId от лодашь.

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

sarink · Accepted Answer · 2018-09-19 23:15:17

идентификатор должен быть помещен внутри 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>
  );
}

Stan Eremin · Accepted Answer · 2015-04-02 23:30:41

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

Stuart Ervine · Accepted Answer · 2017-03-07 23:18:17

вы можете использовать библиотеку, такую как node-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>
    );
  }   
}

tenor528 · Accepted Answer · 2017-07-12 23:01:59

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

Как было сказано выше,я создал простую утилиту для последовательного создания нового идентификатора. Поскольку идентификаторы продолжают увеличиваться на сервере и начинаются с 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 для сервера в каждом рендеринге сервера. В клиенте это не имеет (и не должно иметь) никакого эффекта.

Michael Guild · Accepted Answer · 2016-02-09 22:27:53

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

этого._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 Tooltip Example

Mike Desjardins · Accepted Answer · 2018-09-18 23:27:52

Не используйте идентификаторы вообще, если вам это не нужно, вместо этого оберните вход в метку следующим образом:
<label>
   My Label
   <input type="text"/>
</label>
тогда вам не нужно будет беспокоиться об уникальных идентификаторах.