Wordpress 在 Gatsby 网站的 GraphQL 查询中返回 HTML 符号代码

Question

首先，我不确定这是 Wordpress 问题、Gatsby 问题还是 GraphQL 问题（或其他问题）。

我正在构建一个 Gatsby 站点，使用 gatsby-source-wordpress 从 self-hosted wordpress 站点提取内容。

我正在构建一个主页，查询最近的 posts 并显示标题和一些其他信息。如果标题有特殊字符（-、& 等），则它 return 是标题中该字符的 HTML 代码（例如，用“&”代替“&”）。然后它显示为代码，看起来很糟糕。请参阅下面的一些代码。

在没有 HTML 代码的情况下将其转换为 return 或将其转换回符号，我有哪些选择？

这是查询的相关部分

export const homepageQuery = graphql`
query homepageQuery {
    mainSection: allWordpressPost(limit: 3) {
      edges {
        node {
          id
          title
          date (formatString: "MMM DD, YYYY")
          featured_media {
            source_url
            alt_text
          }
          slug
          categories {
            id
            name
            link
          }     
        }
      }
    }
}

这是一个例子 post returned

{
  "data": {
    "mainSection": {
      "edges": [
        {
      "node": {
        "id": "d1e9b5e0-bb8a-5e73-a89a-ba73aae92e0d",
        "title": "Stories from the Bus Station Bistro &#038; Creamery",
        "date": "Jul 15, 2018",
        "featured_media": {
          "source_url": "https://www.storynosh.com/wp-content/uploads/2018/07/IMG_9962_3.jpg",
          "alt_text": ""
        },
        "slug": "stories-bus-station-bistro-creamery",
        "categories": [
          {
            "id": "3bceb083-de92-5eff-90f3-e2da524f3c2a",
            "name": "Stories",
            "link": "https://www.storynosh.com/category/stories/"
          }
        ]
      }
    }

这是数据最终传递到的呈现数据的组件。

class MostRecent extends Component {
    render(){
        const bgimage = `url(${this.props.data.featured_media.source_url})`;

        return (
            <div className={`${styles.featured} ${styles['most-recent']}`} style={{backgroundImage: bgimage}} >
                <div className={styles['article-info-container']} >
                    <h1 className={styles['featured-header']} >{this.props.data.title}</h1>
                    <div>
                        <Link to={this.props.data.categories[0].link} className={styles['category-box-link']}>
                            <span className={styles['category-box']}>{this.props.data.categories[0].name}</span>
                        </Link>
                        <span className={styles['featured-date']}>{this.props.data.date}</span>
                    </div>
                </div>
            </div>
        )
    }
}

What the result looks like

Answer 1

经过大量搜索后，我确实遇到了这个 post。

Unescape HTML entities in Javascript?

它成为我解决方案的基础。

我在组件中的 return 之前添加了此解决方案中的函数。然后创建一个运行函数的变量并 return 编码 html.

以下作品。

class SecondMostRecent extends Component {
    render() {
        const bgimage = `url(${this.props.data.featured_media.source_url})`

        function htmlDecode(input){
            var e = document.createElement('div');
            e.innerHTML = input;
            // handle case of empty input
            return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
          }

        const title = htmlDecode(this.props.data.title);

        return (
            <div className={`${styles.featured} ${styles['second-most-recent']}`} style={{backgroundImage: bgimage}} >
                <div className={styles['article-info-container']} >
                    <h3 className={styles['featured-header']} >{title}</h3>
                    <div>
                        <Link to={this.props.data.categories[0].link} className={styles['category-box-link']}>
                            <span className={styles['category-box']}>{this.props.data.categories[0].name}</span>
                        </Link>
                        <span className={styles['featured-date']}>{this.props.data.date}</span>
                    </div>
                </div>
            </div>
        )
    }
}

Answer 2

使用 dangerouslySetInnerHTML 为我解决了这个问题：

替换：<h1>{this.props.data.title}</h1>

与：<h1 dangerouslySetInnerHTML={{ __html: this.props.data.title }} />

Wordpress 在 Gatsby 网站的 GraphQL 查询中返回 HTML 符号代码

Wordpress returning HTML symbol codes in GraphQL query in Gatsby website

wordpress

graphql

gatsby