title |
---|
Komponen DOM React |
Semua komponen bawaan peramban mendukung beberapa props dan events.
Ini termasuk props spesifik React seperti ref
dan dangerouslySetInnerHTML
.
Komponen-komponen bawaan peramban ini menerima masukan dari pengguna:
Komponen-komponen tersebut spesial dalam React karena dengan mengoper prop value
ke dalamnya, akan membuatnya menjadi controlled component.
<<<<<<< HEAD Komponen bawaan peramban ini memungkinkan Anda memuat sumber daya external atau menyematkan metadata ke dokumen:
These built-in browser components let you load external resources or annotate the document with metadata:
0f2284ddc8dcab8bbb9b42c04f3c7af94b5b2e73
Komponen ini memiliki perilaku khusus di React karena React dapat merender mereka ke head sebuah dokumen, menangguhkan ketika sumber daya sedang dimuat, dan melakukan hal lainnya yang dideskripsikan oleh halaman yang direferensikan komponen tersebut.
React mendukung semua komponen HTML bawaan peramban. Ini termasuk:
<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>
Serupa dengan standar panduan DOM, React menggunakan konvensi camelCase
untuk penamaan props. Sebagai contoh, Anda disarankan menulis tabIndex
ketimbang tabindex
. Anda dapat mengubah HTML yang telah ada menjadi JSX menggunakan online converter.
Jika Anda render sebuah tag menggunakan tanda hubung, seperti <my-element>
, React akan mengasumsikan Anda untuk render elemen HTML custom. Pada React, cara kerja rendering pada elemen custom akan berbeda dengan rendering pada tags bawaan peramban:
- Semua props dari custom element akan diserialisasikan menjadi strings dan selalu disetel menggunakan attributes.
- Custom elements menerima
class
ketimbangclassName
, danfor
ketimbanghtmlFor
.
Jika Anda render
sebuah elemen HTML bawaan peramban dengan atribut is
, maka itu akan diperlakukan sebagai custom element.
Versi React mendatang akan menambahkan lebih banyak dukungan komprehensif untuk custom elements.
Anda dapat mencobanya dengan memperbarui packages React ke versi eksperimental terbaru:
react@experimental
react-dom@experimental
Versi eksperimental mungkin mengandung bugs. Jangan digunakan di production.
---React mendukung semua komponen SVG bawaan peramban. Ini termasuk:
<a>
<animate>
<animateMotion>
<animateTransform>
<circle>
<clipPath>
<defs>
<desc>
<discard>
<ellipse>
<feBlend>
<feColorMatrix>
<feComponentTransfer>
<feComposite>
<feConvolveMatrix>
<feDiffuseLighting>
<feDisplacementMap>
<feDistantLight>
<feDropShadow>
<feFlood>
<feFuncA>
<feFuncB>
<feFuncG>
<feFuncR>
<feGaussianBlur>
<feImage>
<feMerge>
<feMergeNode>
<feMorphology>
<feOffset>
<fePointLight>
<feSpecularLighting>
<feSpotLight>
<feTile>
<feTurbulence>
<filter>
<foreignObject>
<g>
<hatch>
<hatchpath>
<image>
<line>
<linearGradient>
<marker>
<mask>
<metadata>
<mpath>
<path>
<pattern>
<polygon>
<polyline>
<radialGradient>
<rect>
<script>
<set>
<stop>
<style>
<svg>
<switch>
<symbol>
<text>
<textPath>
<title>
<tspan>
<use>
<view>
Serupa dengan standar panduan DOM, React menggunakan konvensi camelCase
untuk penamaan props. Sebagai contoh, Anda disarankan untuk menuliskan tabIndex
ketimbang tabindex
. Anda juga dapat mengubah SVG yang telah ada ke JSX menggunakan online converter.
Atribut namespaced juga harus dituliskan tanpa tanda titik dua:
xlink:actuate
menjadixlinkActuate
.xlink:arcrole
menjadixlinkArcrole
.xlink:href
menjadixlinkHref
.xlink:role
menjadixlinkRole
.xlink:show
menjadixlinkShow
.xlink:title
menjadixlinkTitle
.xlink:type
menjadixlinkType
.xml:base
menjadixmlBase
.xml:lang
menjadixmlLang
.xml:space
menjadixmlSpace
.xmlns:xlink
menjadixmlnsXlink
.