如何在Helmet中使用dangerouslySetInnerHTML设置meta描述？

错误原因 #

你把dangerouslySetInnerHTML用错了——它是React元素的专属属性，作用是设置元素的innerHTML内容，不能用来给meta标签的content属性赋值。直接把它放进content={}里，React会将其视为未定义的变量，因此触发报错。

另外，meta标签本身没有innerHTML内容，它的content就是普通属性，直接传递字符串值即可，完全不需要用到dangerouslySetInnerHTML。

修正后的代码 #

<Helmet>
  <meta property="og:description" content={event?.description} />
</Helmet>

额外说明 #

如果event?.description中包含HTML标签，你需要先把HTML标签转义为纯文本（比如用DOMPurify.sanitize处理，或手动转义<、>等特殊字符），再赋值给content——因为meta的content属性本身不支持HTML解析，强行传入HTML也只会被当作纯文本展示。

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