1.7 KiB
1.7 KiB
id | title | challengeType | forumTopicId | dashedName |
---|---|---|---|---|
5a24c314108439a4d4036160 | JSX で HTML クラスを定義する | 6 | 301393 | define-an-html-class-in-jsx |
--description--
JSX の記述に慣れてくると、HTML とどう違うのかと不思議に思うかもしれません。
ここまで、HTML と JSX はまったく同じもののように思えるかもしれません。
JSX の重要な違いの一つは、単語 class
を使用して HTML クラスを定義することができなくなったことです。 これは、class
が JavaScript で予約語となっているからです。 代わりに、JSX では className
を使用します。
実際、JSX での HTML 属性とイベント参照の命名規則はすべて、キャメルケースになります。 たとえば、JSX の click イベントは onClick
であり、onclick
ではありません。 同様に、onchange
は onChange
になります。 微妙な違いですが、今後重要になりますので覚えておいてください。
--instructions--
myDiv
というクラスを、JSX コードで提供された div
に適用してください。
--hints--
定数 JSX
から div
要素を返します。
assert.strictEqual(JSX.type, 'div');
div
に myDiv
というクラスを持たせます。
assert.strictEqual(JSX.props.className, 'myDiv');
--seed--
--after-user-code--
ReactDOM.render(JSX, document.getElementById('root'))
--seed-contents--
const JSX = (
<div>
<h1>Add a class to this div</h1>
</div>
);
--solutions--
const JSX = (
<div className = 'myDiv'>
<h1>Add a class to this div</h1>
</div>);