Отличаются ли атрибуты JS от свойств?

Question

Я читаю документацию реагирования JS и наткнулся на это:

Задание атрибутов с помощью JSX :

You may use quotes to specify string literals as attributes: const element = <div tabIndex="0"></div>;

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

Что именно является атрибутом реагирования js, если он отличается от свойства?

Answer 1

html элементы имеют как атрибуты, так и свойства.

. Существует несколько различных сценариев ios, касающихся их взаимосвязи. Не обязательно должен быть как атрибут, так и свойство для каждого значения, установленного для элемента.

1. атрибуты

атрибуты могут быть установлены в html

<a id="mylink" href=""/>

, где href является атрибутом

или атрибуты могут быть установлены с помощью используя метод set атрибута элемента

document.getElementById("mylink").setAttribute("href", "")

и считайте, используя

document.getElementById("mylink").getAttribute("href")

2. свойства

свойства могут быть установлены и прочитаны путем извлечения элемента также

document.getElementById("mylink").href = ""

, где href является свойством

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

• Обычно атрибут и свойство базового элемента автоматически синхронизируются, иногда это не так.
• Иногда нет соответствующего атрибута или свойства, существует только один или другой.

Атрибуты и свойства являются частью собственных элементов html, которые React обеспечивают дополнительную поддержку. и абстракции вокруг.

Пользовательские компоненты React (такие как <MyComponent prop=""/> или <MyComponent prop={someVar}/>), которые вы создаете сами, принимают реквизиты с использованием того же синтаксиса. Слово "реквизит" в этом контексте относится исключительно к "Реакту". Реагирующая поддержка пользовательских компонентов - это просто простые javascript значения, передаваемые в ваш компонент. Эти пользовательские компоненты не добавляются на страницу. Они используются для организации и рендеринга реальных элементов html.

При монтировании собственного компонента внутри пользовательского компонента (например, <div id=""/> или <div id={someVar}/>) библиотека React устанавливает базовый html атрибута в родном элементе браузера.

Таким образом, здесь необходимо иметь в виду две вещи

1. html атрибуты элемента verse html свойства элемента.
2. реквизиты пользовательских элементов не являются ни одним из них, но при установке реквизита для собственного элемента JSX, такого как div , задайте атрибут сгенерированного элемента.

Теперь это было установлено, в документации выше сказано: если вы хотите установить значение атрибута в строку, вы можете использовать указанный синтаксис c. Этот синтаксис работает только для установки значений атрибутов в строки.

Вы можете использовать:

<div id="myid"/>

или

<div id={'myid'} />

для установки значения атрибута строки. Они, вероятно, просто указывают на различия в синтаксисе.

, если вы делаете:

<div tabIndex="0"/>

значение tabIndex - это строка 0, а не ноль

стихи это:

<div tabIndex={0} />

, который передаст нулевой номер в атрибут tabindex базового html элемента