Модифицировать HTML-тэг из опасно SetInnerHTML в React

Question

Я создаю блог Gatsby, используя React / Gatsby и Wordpress API.

Я вывожу отрывок из последних статей на целевой странице примерно так:

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

Проблема в том, что мой this.props.post.node.excerpt содержит нежелательный тег <p>.Этот тег наследуется от Bootstrap CSS, так как я использую Bootstrap 4 во всем проекте и от таблицы стилей агента пользователя.

Поэтому мне нужно найти способ либо:

• получитьизбавиться от тега p
• изменить CSS после монтирования выдержки

Я попробовал следующее решение:

componentDidMount() {
  this.removePTagMargin();
}

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

, но оно не работает (может быть, потому что он выполняется до вызова API WP?).

Как мне решить мою проблему?

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