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

我正在使用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调用完成之前执行？）。

我该如何解决我的问题？

最佳答案

假设摘录来自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的助手，它将简单地修剪字符串中的前三个字符和字符串中的后四个字符。

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

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

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

关于css - 从React中的危险地设置InnerHTML修改HTML标签，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56645631/