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)

参考

• DOM Elements – React # dangerouslySetInnerHTML