GatsbyJS HTML React Parser - 解析 ACF 所见即所得字段答案

【问题标题】：GatsbyJS HTML React Parser - Parse ACF Wysiwyg fieldGatsbyJS HTML React Parser - 解析 ACF 所见即所得字段
【发布时间】：2023-03-05 08:32:02
【问题描述】：

我正在尝试在我的 WordPress/Gatsby 构建中将 ACF Wysiwyg 编辑器输出为 HTML。我创建了一个字段，但是当我运行 gatsby develop 时，文本显示如下：

<p><a href="#">My link</a></p>

我想我需要使用 react-html-parser 库。

我已经使用 npm 安装了包并使用 import parse from 'html-react-parser' 导入了 html 解析器

每当我尝试解析我的 ACF Wysiwyg 字段时，它似乎都没有做任何事情。不太确定我错过了什么：

        <div class="wrapper">
          <div class="box a">
            parse(`{wpgraphql.pages.edges[0].node.undersideACFgraphql.mainText}`)
          </div>
          <div class="box b">Her skriver jeg tekst 2 :D</div>
        </div>

【问题讨论】：

标签： reactjs graphql html-parsing gatsby

【解决方案1】：

我找到了自己问题的答案。我必须在解析字符串周围设置 { } 并且效果很好：

{parse(`${wpgraphql.pages.edges[0].node.undersideACFgraphql.mainText}`)}

【讨论】：