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

Question

I am building a Gatsby Blog using React/Gatsby & the Wordpress API.

I render an excerpt of the latest articles on the landing page like so:

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

The problem is, my this.props.post.node.excerpt comes with an unwanted wrapping <p> tag. This tag inherit from Bootstrap CSS as I am using Bootstrap 4 in my whole project, and from the user agent stylesheet.

Hence I need to find a way either to :

• get rid of the wrapping p tag
• modify the CSS once the excerpt is mounted

I tried the following solution:

componentDidMount() {
  this.removePTagMargin();
}

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

but it does not work (maybe because it executes before the WP API call is done ?).

How can I solve my problem ?

Answer 1

This is assuming the excerpt comes from gatsby-transformer-remark .

You can choose the format of your excerpt in your GraphQL query for the post, it looks like the format you're using is HTML , you want PLAIN :

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

Try modifying your query by putting the format parameter on the excerpt field:

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

Edit: Hacky way of removing the <p> tags due to the inefficiencies in this gatsby-source-wordpress plugin.

Add a helper called removeParagraphTags this will simply trim the first three chars from the string and the last 4 chars from the string.

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

Then you can use this helper when setting the excerpt HTML.

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