GatsbyJS HTML React Parser - 解析 ACF Wysiwyg 字段

Question

我正在尝试在我的 WordPress/Gatsby 构建中将 ACF 所见即所得编辑器输出为 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>

Answer 1

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

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

GatsbyJS HTML React Parser - 解析 ACF Wysiwyg 字段

GatsbyJS HTML React Parser - Parse ACF Wysiwyg field

html-parsing

reactjs

graphql

gatsby