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

Question

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

<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>
    

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

My link＆...

] >>

我找到了自己问题的答案。我必须在解析字符串周围设置{}，它才能正常工作：

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

Answer 1

我找到了自己问题的答案。我必须在解析字符串周围设置{}，它才能正常工作：