React(及びNext.js)では、JavaScriptの予約語や命名規則に関連していくつかのHTML属性の名前が変更されています。以下に、HTML属性とそれに対応するReact属性の一覧を示します:
HTML属性 | React属性 |
---|---|
class | className |
for | htmlFor |
tabindex | tabIndex |
readonly | readOnly |
colspan | colSpan |
rowspan | rowSpan |
contenteditable | contentEditable |
maxlength | maxLength |
minlength | minLength |
accesskey | accessKey |
autocomplete | autoComplete |
autofocus | autoFocus |
novalidate | noValidate |
spellcheck | spellCheck |
srcset | srcSet |
crossorigin | crossOrigin |
datetime | dateTime |
また、Reactではinlineスタイルは文字列ではなくJavaScriptのオブジェクトとして提供され、CSSプロパティの名前はキャメルケースで記述されます。例えば:
<div style={{backgroundColor: 'blue', height: '100px'}}></div>
これらはHTMLとReactで属性名が異なる例の一部で、他にも多くのReact固有の属性があります。これにはイベントハンドラ(onClick、onSubmitなど)や特殊な属性(key、refなど)が含まれます。詳細な情報はReactの公式ドキュメンテーションで見つけることができます。