React dangerouslySetInnerHTML使用&字符破坏JSON配置

Question

我试着把amp-analytics脚本放到从Next.js生成的amp页面中，但是dangerouslySetInnerHTML因为&字符而破坏了JSON配置。

代码如下：

<amp-analytics id='analytics1' type='googleanalytics'>
  <script type='application/json' dangerouslySetInnerHTML={{ __html: `
    {
      "vars": {
        "account": "XX-XXXXXXXX-X"
      },
      "requests": {
         "experiment": "\${pageview}&xid=\${xid}&xvar=\${xvar}"
      }
    }
  ` }} />
</amp-analytics>

结果如下：

​

如您所见，&字符已转换为\u0026，现在amp-analytics标记不起作用。

我还尝试了这个：

<amp-analytics id='analytics1' type='googleanalytics'>
  <script type='application/json' dangerouslySetInnerHTML={{ __html: `
    {
      "vars": {
        "account": "XX-XXXXXXXX-X"
      },
      "requests": {
         "experiment": "${JSON.stringify('${pageview}&xid=${xid}&xvar=${xvar}')}"
      }
    }
  ` }} />
</amp-analytics>

但获取的JSON无效(带右符号&)

​

对如何解决这个问题有什么想法吗？

事实证明，这种情况的发生是因为Next.js - github.com/ampproject/ AMP -toolbox/pull/649中的amp Optimizer，现在我必须为这种情况找到解决方案

Answer 1

只有在需要将dangerouslySetInnerHTML解析为DOM节点时，才需要使用HTML.

您可以这样设置文本内容：

<script type='application/json'>
  {JSON.stringify(
    {
      vars: {
        account: 'XX-XXXXXXXX-X',
      },
      requests: {
        experiment: `${pageview}&xid=${xid}&xvar=${xvar}`,
      },
    }
  )}
</script>

如果您这样做，React就足够聪明，它知道script标记中不需要HTML实体，所以这些&不会被转义(不像是普通的HTML元素，比如div )。

您可以像这样进行验证(demo)：

const InnerHtmlLogger = ({ TagName }) => {
  const ref = useRef(null);

  useEffect(() => {
    console.log(TagName, ref.current.innerHTML);
  }, [TagName]);

  return (
    <TagName ref={ref}>
      {JSON.stringify({
        '&': '&&',
        '&&&': ['&&&&', '&&&&&']
      })}
    </TagName>
  );
};

const App = () => {
  return (
    <>
      <InnerHtmlLogger TagName='div' />
      <InnerHtmlLogger TagName='script' />
    </>
  );
}

// Log output:
// div {"&amp;":"&amp;&amp;","&amp;&amp;&amp;":["&amp;&amp;&amp;&amp;","&amp;&amp;&amp;&amp;&amp;"]}
// script {"&":"&&","&&&":["&&&&","&&&&&"]}