created: 2019-10-22T11:53:11.000Z

reactでhtml内にjsonを埋め込む

  • reactのVDOMにJSONを埋め込もうとすると、htmlサニタイズされてしまう
  • サニタイズされた文字列を読み込むのは面倒
  • サニタイズされないように文字列を埋め込むのには dangerouslySetInnerHTML を使う
<template id="foo" dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }} />

埋め込んだ値を使うときはこんな感じ (innerHTML に入る)

const template = document.getElementById('foo');
const data = JSON.parse(template.innerHTML)

参考