Css 在React中修改来自危险的LysetinerHTML的HTML标记

我正在使用React/Gatsby和wordpressapi创建一个Gatsby博客

我在登录页上呈现了最新文章的摘录，如下所示：

<span
  className="mb-0"
  id="excerpt-wrapper"
  dangerouslySetInnerHTML={{ __html: this.props.post.node.excerpt}
/>

但是它不起作用（可能是因为它在wpapi调用完成之前执行？）

---

我怎样才能解决我的问题

这是假设摘录来自《盖茨比变形金刚评论》

您可以在日志的GraphQL查询中选择摘录的格式，您使用的格式似乎是

HTML

，您需要

PLAIN

：

将

格式

参数放在

摘录

字段中，尝试修改查询：

{
  allMarkdownRemark {
    edges {
      node {
        excerpt(format: PLAIN)
      }
    }
  }
}

编辑：删除

标签的黑客方法，因为

盖茨比源wordpress

插件效率低下

添加一个名为

removeparraphtags

的助手，这将简单地从字符串中修剪前三个字符，并从字符串中修剪最后四个字符

removeParagraphTags (excerpt) {
  return excerpt.substr(3, excerpt.length - 7)
}

然后，您可以在设置摘录HTML时使用此帮助程序

dangerouslySetInnerHTML={{
  __html: this.removeParagraphTags(this.props.post.node.excerpt)
}}

---

嗨@MichaelCurry，谢谢你的帮助！不幸的是，这段摘录来自《盖茨比》源代码wordpress，而不是《盖茨比变形金刚评论》。因此，我不能使用此选项：（@JulesCorb Oof，看起来像是

gatsby source wordpress

将只返回HTML格式，这是一种有趣的方法。可能值得做一些事情，比如创建一个帮助函数来修剪摘录字符串中的

。

。我已经用一种方法更新了我的答案。是的，这可能是我想要的解决方案我要去，我还没有找到更好的，而且我真的不确定还有更好的。谢谢你的回复，迈克尔！

dangerouslySetInnerHTML={{
  __html: this.removeParagraphTags(this.props.post.node.excerpt)
}}