DOM-компоненти React

React підтримує всі вбудовані у браузері HTML та SVG компоненти.

Спільні компоненти

Всі вбудовані компоненти браузера підтримують деякі пропси та події.

Сюди входять специфічні для React пропси, такі як ref та dangerouslySetInnerHTML.

Компоненти форми

Ці вбудовані компоненти браузера приймають дані від користувача:

Вони є особливими в React, оскільки передача їм пропу value робить їх керованими.

Всі HTML-компоненти

React підтримує всі вбудовані HTML-компоненти браузерів. Сюди входять:

  • <aside>
  • <audio>
  • <b>
  • <base>
  • <bdi>
  • <bdo>
  • <blockquote>
  • <body>
  • <br>
  • <button>
  • <canvas>
  • <caption>
  • <cite>
  • <code>
  • <col>
  • <colgroup>
  • <data>
  • <datalist>
  • <dd>
  • <del>
  • <details>
  • <dfn>
  • <dialog>
  • <div>
  • <dl>
  • <dt>
  • <em>
  • <embed>
  • <fieldset>
  • <figcaption>
  • <figure>
  • <footer>
  • <form>
  • <h1>
  • <head>
  • <header>
  • <hgroup>
  • <hr>
  • <html>
  • <i>
  • <iframe>
  • <img>
  • <input>
  • <ins>
  • <kbd>
  • <label>
  • <legend>
  • <li>
  • <link>
  • <main>
  • <map>
  • <mark>
  • <menu>
  • <meta>
  • <meter>
  • <nav>
  • <noscript>
  • <object>
  • <ol>
  • <optgroup>
  • <option>
  • <output>
  • <p>
  • <picture>
  • <pre>
  • <progress>
  • <q>
  • <rp>
  • <rt>
  • <ruby>
  • <s>
  • <samp>
  • <script>
  • <section>
  • <select>
  • <slot>
  • <small>
  • <source>
  • <span>
  • <strong>
  • <style>
  • <sub>
  • <summary>
  • <sup>
  • <table>
  • <tbody>
  • <td>
  • <template>
  • <textarea>
  • <tfoot>
  • <th>
  • <thead>
  • <time>
  • <title>
  • <tr>
  • <track>
  • <u>
  • <ul>
  • <var>
  • <video>
  • <wbr>

    • Подібно до стандарту DOM, React використовує camelCase угоду для імен пропсів. Наприклад, ви напишете tabIndex замість tabindex. Ви можете перетворити існуючий HTML на JSX за допомогою онлайн-конвертера.

    Нестандартні елементи HTML

    Якщо ви рендерите тег з тире, наприклад <my-element>, React вважатиме, що ви хочете рендерити користувацький HTML-елемент. У React рендеринг користувацьких елементів працює інакше, ніж рендеринг вбудованих тегів браузера:

    • Усі пропси користувацьких елементів серіалізовано у рядки і завжди задаються за допомогою атрибутів.
    • Кастомні елементи приймають клас, а не className, і для, а не htmlFor.

    Якщо ви рендерите вбудований HTML-елемент браузера з атрибутом is, він також буде розглядатися як користувацький елемент.

    У майбутній версії React буде включено більш повну підтримку користувацьких елементів.

    Ви можете спробувати, оновивши пакунки React до останньої експериментальної версії:

    • react@experimental
    • react-dom@experimental

    Експериментальні версії React можуть містити помилки. Не використовуйте їх у виробництві.

    Усі компоненти SVG

    React підтримує всі вбудовані SVG-компоненти браузерів. Сюди входять:

    Подібно до стандарту DOM, React використовує camelCase угоду для імен пропсів. Наприклад, ви напишете tabIndex замість tabindex. Ви можете перетворити існуючий SVG на JSX за допомогою онлайн-конвертера.

    Атрибути простору імен також слід писати без двокрапки:

    • xlink:actuate стає xlinkActuate.
    • xlink:arcrole стає xlinkArcrole.
    • xlink:href стає xlinkHref.
    • xlink:role стає xlinkRole.
    • xlink:show стає xlinkShow.
    • xlink:title стає xlinkTitle.
    • xlink:type стає xlinkType.
    • xml:base стає xmlBase.
    • xml:lang стає xmlLang.
    • xml:space стає xmlSpace.
      • .
    • xmlns:xlink стає xmlnsXlink.