0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

HTMLとREACTの属性の名前の違い

Posted at

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の公式ドキュメンテーションで見つけることができます。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?