REACT:如何防止数据分配中的逃脱

Question

我有一个看起来像{" id"：" xyz"，" height"：1024，" width"：1024}的JSON：我想在数据属性中具有喜欢：

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

但是，当我使用反应时，它会逃脱字符串，如下所示：

<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

'dangesslysetinnerhtml'属性精确地用于这样的场景。

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