dangerouslySetInnerHTML でmarkdownの中身が表示されない時
April 16, 2020

DEVELOPMENT

web
js
React
node

ReactでHTMLの中身を子要素として、表示する際に便利な「dangerouslySetInnerHTML」ですが、

中身が上手く表示されないことがあります。

今回、僕はReactとの相性がいいMaterial UIを使っていますが、

その際、Typographyと組み合わせて使用しましたが、ページを遷移した際は表示されますが、

該当ページに直でアクセスすると中身が空っぽになる現象に遭遇しました。

しかもPrductionのときだけです。

今回、その解決方法をご紹介します。

現象

  • マークダウンの中身を取ってきて、dangerouslySetInnerHTMLにて子要素として追加する際、中身が表示されない
  • Productionのときのみ
  • トップページ等から遷移してきたときは、表示され、直でURLを叩いたときに表示されない
  • その時でも一瞬ちらっと表示されるが、隠れてしまう
<Typography variant="body2" component="p" dangerouslySetInnerHTML={{ __html: post.html }} />

リサーチ

調べてましたがなかなか見つからず、やっとたどり着きました。 [dangerouslySetInnerHTML does not work on production builds #11108][https://github.com/gatsbyjs/gatsby/issues/11108]

  • Divで囲えと?

意味

  • 僕の書いたTypographyの要素で、componentというpropsの指定がイカンかった

Typography


解決方法

  • 先程のGithubにもあった通り、親要素をDivにしないとダメということです。

    <Typography variant="body2" component="div" dangerouslySetInnerHTML={{ __html: post.html }} />

このように変更したら動きました。

まとめ

いかがでしたか?お役に立てれば幸いです!

うかい / 株式会社UKAI
うかい@代表取締役兼エンジニア株式会社UKAI
Nobuyuki Ukai

株式会社UKAI 代表取締役CEO。建築を専攻していたが、新卒でYahoo!Japanにエンジニアとして入社。その後、転職、脱サラ、フリーランスエンジニアを経て、田舎へ移住し、ゲストハウスの開業、法人成り。ゲストハウス2軒、焼肉店、カフェ、食品製造業を運営しています。詳細はこちらから

🙏よかったらシェアお願いします🙏
WRITTEN BY
うかい / 株式会社UKAI
うかい@代表取締役兼エンジニア株式会社UKAI

Nobuyuki Ukai

株式会社UKAI 代表取締役CEO。建築を専攻していたが、新卒でYahoo!Japanにエンジニアとして入社。その後、転職、脱サラ、フリーランスエンジニアを経て、田舎へ移住し、ゲストハウスの開業、法人成り。ゲストハウス2軒、焼肉店、カフェ、食品製造業を運営しています。詳細はこちらから

CONACT
入力して下さい
Slack からもどうぞ

※お気軽にどうぞ!(6月20日まで有効!お早めに)

COPYRIGHT © 2020 UKAI CO., LTD. ALL RIGHTS RESERVED.