ReactでdangerouslySetInnerHTMLの挙動がおかしい

Question

実現したいこと

<p className='testclass'>a</p>となっていて欲しい

前提

取得した文字列のhtmlをReact上で表示したいと考えています。
お力をお借りできるとありがたいです。
よろしくお願いいたします。

発生している問題・エラーメッセージ

<div dangerouslySetInnerHTML={{ __html: "<p className='testclass'>a</p>" }} />とするとデベロッパーツールで確認すると、<p classname='testclass'>a</p>となってしまいます。 classNameがclassnameとなっている状況です。 なぜ、nameのNだけが変換されてしまうのかわからなくて困っています。

該当のソースコード

<div dangerouslySetInnerHTML={{ __html: "<p className='testclass'>a</p>" }} />

Comments

[hoshi-takanori]

たぶん、その文字列は JSX として解釈されるのではなく、そのまま innerHTML にセットされるのでは。
そもそも危険だと自分で言ってるので使わないに越したことはないでしょうし。

[QQQ777]

コメントありがとうございます。
私は危険だとは言っていませんが、どなたかの質問と混同されているのでしょうか？
そのまま innerHTMLにセットされる場合、勝手に変換されるのでしょうか？

[hoshi-takanori]

想像ですが、そのまま innerHTML にセットされた結果、JSX ではなく普通の HTML として、React は関与せずにブラウザが解釈することになるのでは。
また、「危険だと自分で言ってる」の主語はその属性名 (dangerously なんちゃら) です。言葉足らずで失礼しました。

[QQQ777]

属性名のことでしたか。
innerHTMLの代替としてdangerouslySetInnerHTMLがあるようなのですが、どの様なことが原因でNをnに変換がかかるのでしょうか？

[hoshi-takanori]

HTML はタグや属性名の大文字小文字を区別しませんので。className なんて属性もありませんし。

[QQQ777]

それではdangerouslySetInnerHTMLとしては正常な動きなのでしょうか？
区別しないなら変換しないでそのまま文字として出てきそうな気がします。
実現したいことを実現するにはどの様にすれば良いのでしょうか？

[maisumakun]

> 実現したいことを実現するにはどの様にすれば良いのでしょうか？

あえてclassではなくclassNameを指定したい理由はなんですか？

[QQQ777]

reactで、classではなくclassNameで指定しないとcssが反映しないからです。

Answer 1

reactで、classではなくclassNameで指定しないとcssが反映しないからです。

いえ、 dangerouslySetInnerHTMLは書いての通り純粋なHTMLを指定するので、classNameではなくclassで書く必要があります。

jsFiddle

Comments

[maisumakun]

最初の質問にある、「実現したいこと」が妥当ではない（CSSのためのクラス指定をしたいならこの場面ではclassNameと書いてはいけない）、という趣旨の回答です。

[QQQ777]

すみません。
実現したいことを実現するにはどの様にすれば良いのでしょうか？
dangerouslySetInnerHTMLにこだわるつもりはありません。
実現したいことを実現するための手段として選択しましたがNをnに替えるのが仕様とのことでしたら、実現したいことを実現するにはどのようにするのが適切なのでしょうか？

[maisumakun]

> 実現したいことを実現するにはどのようにするのが適切なのでしょうか？

実現したいことが「dangerouslySetInnerHTMLで出力したHTMLにクラスでCSSを適用すること」なのであれば、「classNameでなくclassと書く」のが適切です。

そうでなく「あくまでclassNameというHTMLを出力したい」というのであれば、なぜそれを実現したいのか（それを実現した結果として何を目指しているのか）、その背景を説明してください。真に実現したいことによっては、別な代替手段も考慮可能です。

[maisumakun]

HTMLの属性名は「小文字に変換して」処理されます。class「N」ameはclassnameに変換されると規定されているのです。

https://momdo.github.io/html/parsing.html#attribute-name-state

[QQQ777]

> 真に実現したいこと

## 実現したいこと
<p className='testclass'>a</p>となっていて欲しい
## 前提
取得した文字列のhtmlをReact上で表示したいと考えています。
取得した文字列から変換されると困ってしまいます。

[maisumakun]

もしかして、「HTMLをHTMLとしての処理は行わず、単なる文字列として」表示したいということでしょうか？

そうであれば、{ "<p className='testclass'>a</p>" }のように単にHTML文字列を中括弧でJSX内に埋め込むだけで、自動でエスケープが行われて、HTMLタグがタグとして働かない、単なる文字列として出力されます。

[QQQ777]

<p className='testclass'>a</p>の状態で、JSX内でHTMLタグとして使用したいです。

[maisumakun]

なぜそれを行いたいのですか？（「取得した文字列から変換されると困ってしまいます。」が、どのように困っているのかも推測すらできない状況です）

ブラウザに出力した際に、classNameという属性はブラウザにとっては意味も持たず、またNの大小すら保存されないことはすでに触れたのですが、それを行ってどういう意味を持つ状況なのでしょうか？

[maisumakun]

> <p className='testclass'>a</p>となっていて欲しい

HTMLファイルに<p className>と書いてすら、ChromeやFirefoxの検証ツールでclassnameとなります。

「直接的に実現することは不可能」なのですが、このようなHTMLを構築すること「自体」が目的だったのですか？そうでないなら、このようなHTMLを構築することで何を実現したかったのかの方をご説明いただければと思います。

[QQQ777]

前提となる知識が不足していたようです。
ご協力ありがとうございました。

Answer 2

className プロパティではなく class 属性を設定したいのでしたら、"<p class='testclass'>a</p>" じゃないでしょうか。

属性名の大文字小文字を区別しないのはブラウザ内蔵のHTMLパーザです。メモリ上では属性名は小文字にして保存しているのでしょう。

Answer 3

ReactのJSXは、JavaScriptで記述されたHTMLのようなものであり、ブラウザで表示されるHTMLに変換されます。この変換処理は、Reactのビルドプロセスによって行われます。
Reactのビルドプロセスでは、JSXの要素の属性を分析し、HTMLの属性に変換します。このとき、className属性はclass属性に変換されます。
そのため、ReactでJSXで記載したclassNameという文字列は、buildしてHTMLにする時にclassに書き換わります。

正常な動作の様で、dangerouslySetInnerHTMLは特に関係ありませんでした。
また、実現したい事は動作の途中では叶っていたので問題なさそうです。