GatsbyJS HTML React -解析ACF Wysiwyg字段

Question

我试图在我的WordPress/Gatsby构建中输出一个ACF编辑器作为HTML。我创建了一个字段，但是当我运行gatsby开发时，出现的文本如下：

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

我想我需要使用一个react html解析器库。

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

每当我试图解析我的anything字段时，它似乎什么也不做。不太确定我错过了什么：

        <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}`)}