React DOM komponentit

React tukee kaikkia selaimen sisäänrakennettuja HTML ja SVG komponentteja.


Yleiset komponentit

Kaikki selaimen sisäänrakennetut komponentit tukevat joitain propseja ja tapahtumia.

Tämä sisältää myös Reactin omat propsit, kuten ref ja dangerouslySetInnerHTML.


Lomakekomponentit

Nämä selaimen sisäänrakennetut komponentit hyväksyvät käyttäjän syötteen:

Ne ovat erityisiä Reactissa, koska value-propsin antaminen niille tekee niistä kontrolloituja.


Kaikki HTML komponentit

React tukee kaikkia selaimen sisäänrakennettuja HTML komponentteja. Tämä sisältää:

Huomaa

Vastaavasti kuten DOM standardissa, React käyttää camelCase-konventiota propsien nimissä. Esimerkiksi, kirjoitat tabIndex sen sijaan, että kirjoittaisit tabindex. Voit muuntaa olemassaolevaa HTML:ää JSX:ksi verkkokonvertterilla.


Mukautetut HTML elementit

Jos renderöit tagin, jossa on viiva, kuten <my-element>, React olettaa, että haluat renderöidä mukautetun HTML elementin. Reactissa, mukautetun elementin renderöinti toimii eri tavalla kuin selaimen sisäänrakennetun tagin renderöinti:

  • Kaikki mukautetun elementin propsit serialisoidaan merkkijonoiksi ja asetetaan aina attribuutteina.
  • Mukautetut elementit hyväksyvät class-propsin sijaan className-propsin, ja for-propsin sijaan htmlFor-propsin.

Jos renderöit selaimen sisäänrakennetun HTML elementin is attribuutilla, se käsitellään myös mukautettuna elementtinä.

Huomaa

Tulevaisuuden versio Reactista sisältää kattavamman tuen mukautetuille elementeille.

Voit kokeilla sitä päivittämällä React paketit uusimpaan kokeelliseen versioon:

  • react@experimental
  • react-dom@experimental

Kokeelliset versiot Reactista saattavat sisältää bugeja. Älä käytä niitä tuotannossa.


Kaikki SVG komponentit

React tukee kaikkia selaimen sisäänrakennettuja SVG komponentteja. Tämä sisältää:

Huomaa

Vastaaavasti kuten DOM standardissa, React käyttää camelCase-konventiota propsien nimissä. Esimerkiksi, kirjoitat tabIndex sen sijaan, että kirjoittaisit tabindex. Voit muuntaa olemassaolevaa SVG:ää JSX:ksi verkkokonvertterilla.

Attribuutit nimitilalla täytyy myös kirjoittaa ilman kaksoispistettä:

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