Принимает ли атрибут className роль атрибута id в Reactjs?

Поскольку атрибуты id редко используются в компонентах Reactjs из-за того, что атрибуты id подразумевают, что компонент не будет повторно использоваться, то используются ли атрибуты className вместо id? Если это так, то что такое Reactjs-эквивалент атрибута class в HTML?


person Dipen    schedule 14.02.2015    source источник


Ответы (4)


className используется для имен классов для стилей CSS, как и везде.

Вы можете дать чему-то уникальное className для стилизации так же, как вы могли бы дать ему в противном случае id, конечно, но на самом деле это не означает ничего другого для другого className использования, которое никогда не может быть прямым эквивалентом id, потому что className может содержать несколько имен классов, ни одно из которых не должно быть уникальным. (Есть также довольно хорошие причины не использовать id для стилизации, независимо от React).

Более распространенная причина не давать чему-то id с React заключается в том, что вам редко нужно добавлять хуки, чтобы искать элемент в реальной DOM, поскольку вы можете использовать состояние или реквизиты для управления изменениями рендеринга, которые делают любые динамические вещи, которые вам нужны. чтобы сделать, и если вам действительно нужно взять элемент, вы можете присвоить ему ref имя и использовать getDOMNode().

person Jonny Buchanan    schedule 14.02.2015

Чтобы добавить к ответу insin, идентификаторы действительно имеют практическое применение, но стиль не входит в их число.

Два случая - идентификаторы фрагментов и пара ввода / метки. В этом случае вы обычно хотите сгенерировать идентификаторы, которые гарантированно будут уникальными в глобальном масштабе (но согласованными для всех визуализаций). Для этого используйте миксин, например unique-id-mixin.

person Brigand    schedule 15.02.2015
comment
Моей первой мыслью было: а как насчет производительности, ведь использование id наверняка будет быстрее? Нашел здесь некоторую информацию: stackoverflow.com/a/31027148/945875 В конце концов, поиск идентификатора выполняется быстрее при использовании в качестве ключевого селектора, но выигрыш настолько минимален (1 мс для 1000 правил в тесте производительности), что это не имеет значения (и вы можете избежать некоторых сложных проблем с наследованием). - person Justin; 25.07.2018

Прежде всего, идентификаторы используются с React, и они не обязательно предотвращают повторное использование. Например, если вы хотите использовать элемент, вам нужно будет присвоить ему идентификатор (чтобы на него можно было ссылаться из атрибута «list» его тега). В этом случае я обычно автоматически генерирую идентификатор, используя переменную счетчика. Следовательно, идентификаторы и повторное использование не должны исключать друг друга.

Чтобы ответить на ваш вопрос, вместо этого используется атрибут className, который работает так же, как атрибут class. Модуль «react / addons» предоставляет утилиту для простого создания значений className.

person rogierschouten    schedule 14.02.2015

Идентификаторы предназначены для одноразового использования (в React и в целом) или для одноразового использования.

classNames предназначены для многократного использования (в React и в целом) или для многократных экземпляров - так же, как классы используются в традиционном CSS.

person Sean Tank Garvey    schedule 23.11.2017