如何在React中将对象作为子元素传入script标签？

你遇到的问题是因为JSX的解析规则和原生HTML不同：在JSX里，<script>标签内的{"fieldOne":"value"}会被当成JavaScript表达式解析，而这种写法在JS里是无效的（对象字面量不能直接以这种形式单独存在），所以触发了语法错误。

下面是两种可行的解决方法：

方法一：直接使用dangerouslySetInnerHTML #

React默认会转义所有插入的内容，要插入原始的JSON字符串到script标签，需要用dangerouslySetInnerHTML属性：

<script dangerouslySetInnerHTML={{ __html: '{"fieldOne":"value"}' }} />

这里__html的值是字符串形式的JSON，React会直接把它插入到script标签内部，不会解析里面的大括号。

方法二：先定义JSON字符串变量 #

如果JSON内容比较复杂，或者需要动态生成，可以先把对象转成字符串再传入：

const scriptData = JSON.stringify({ fieldOne: "value" });

// 在组件的JSX中使用
<script dangerouslySetInnerHTML={{ __html: scriptData }} />

这种方式更易维护，也方便后续修改JSON内容。

注意事项 #

dangerouslySetInnerHTML的命名已经提示了风险：如果插入的内容来自不可信的外部源，可能会导致XSS攻击。如果是你自己控制的静态内容或可信的动态内容，就可以放心使用。

内容的提问来源于stack exchange，提问作者tinymceHello