Реагировать css, используя ref вместо id
Предыстория
Обычно я бы использовал id для управления стилями элементов по умолчанию.
html:
<div id = "my-div"></div>
stylesheet:
#my-div { background: white }
В реакции кажется, что ids отсутствуют, а refs есть, но я не вижу много информации о том, как делать стили с рефами.
html:
<div ref = "my-div"></div>
stylesheet:
???
Вопрос
Как я могу редактировать стиль элемента, используя ссылки в таблице стилей?
** РЕДАКТИРОВАТЬ **
Этот пост был сделан некоторое время назад. С тех пор я обнаружил, что ссылки предназначены для отслеживания внутренних/виртуальных элементов. Я также вырезал идентификаторы для своих одноэлементных элементов, поскольку я оставляю идентификаторы в качестве окончательного варианта для целей css, например. когда есть несколько конкурирующих стилей класса, id берет на себя ответственность.
вы можете проверить это через Dev Tools: ref атрибут настолько внутренний для React, что он вообще не входит в DOM. Так что технически невозможно сослаться на это в CSS, даже если вы используете старую школу «string ref». Вы должны изменить сам компонент, добавив id, className или любой другой атрибут, чтобы иметь возможность ссылаться на него в CSS.
Нет, вы не можете редактировать стиль элемента, используя ref в таблице стилей. Поскольку ref недоступен в DOM. поэтому вы даже не можете использовать селектор атрибутов [attr=value] для стилизации элемента. так что просто используйте id.
Ответы 2
Вам не нужны ссылки для стилизации div, вы все равно можете использовать идентификаторы или классы!
Читайте о ссылках здесь: https://reactjs.org/docs/refs-and-the-dom.html
Прочитайте о стилях ваших компонентов здесь: https://reactjs.org/docs/faq-styling.html
Может быть, вы могли бы просто создать правила стиля CSS и при необходимости назначить соответствующие правила семантическим элементам, составляющим ваш компонент React?
Например:
Код реакции:
<div className = "custom">
<p>My test paragraph</p>
</div>
Правила CSS:
.custom {
// add your styling here
}
Вместо ключевого слова class, как в HTML, это className в React, поскольку в React вы не можете использовать какие-либо JavaScript ключевые слова для конкретного языка.
Надеюсь, это поможет!
вы можете использовать
ids.