Question

我正在使用React / Gatsby和Wordpress API建立一个Gatsby博客。

我像这样在目标网页上呈现了最新文章的摘录：

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

问题是，我的this.props.post.node.excerpt带有不需要的包装<p>标签。当我在整个项目中使用Bootstrap 4时，此标记继承自Bootstrap CSS，并且继承自用户代理样式表。

因此，我需要找到一种方法：

摆脱包装p标签
摘录后修改CSS

我尝试了以下解决方案：

componentDidMount() {
  this.removePTagMargin();
}

removePTagMargin = () => {
  const excerptWrapper = document.querySelector("#excerpt-wrapper");
  excerptWrapper.firstChild.style.marginBottom = "0px !important"
  excerptWrapper.firstChild.style.marginBlockEnd = "0px !important"
}

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

我该如何解决我的问题？

Answer 1

这是假设摘录来自gatsby-transformer-remark。

您可以在GraphQL查询中为帖子选择摘要的格式，看起来您正在使用的格式为HTML，您想要的是PLAIN：

https://www.gatsbyjs.org/packages/gatsby-transformer-remark/#format

尝试通过将format参数放在excerpt字段来修改查询：

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

编辑：由于此<p>插件的效率低下，导致删除gatsby-source-wordpress标签的方法很笨拙。

添加一个名为removeParagraphTags的帮助程序，它将简单地修剪字符串中的前三个字符和字符串中的后4个字符。

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

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

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

从React中的危险地设置InnerHTML修改HTML标签

1 个答案: