React：如何防止數據屬性轉義

Question

我有一個看起來像這樣的JSON {“ id”：“ xyz”，“ height”：1024，“ width”：1024}我想要在數據屬性中使用：

<div data-command='{"id":"xyz","height":1024,"width":1024}'></div>

但是當我使用react時，它會如下所示轉義字符串：

<div data-command='{&quot;id&quot;:&quot;xyz&quot;,&quot;height&quot;:1024,&quot;width&quot;:1024}'></div>

我使用此代碼生成元素

    React.createElement("div",
{ "data-command" : JSON.stringify({ "id":"xyz", "height":1024, "width":1024 }), null)

有誰知道如何在不進行轉義的情況下獲取JSON？

如果不可能，如何在javascript中將其轉換回原來的格式，以便以后可以使用JSON.parse？

Answer 1

“ dangerouslySetInnerHTML”屬性正是用於這種情況。

createMarkup() {
    return {__html: `<div data-command='{"id":"xyz","height":1024,"width":1024}'></div>`};
}

render() {
    return (
        <div dangerouslySetInnerHTML={this.createMarkup()}>
        </div>
    );
}