如何在reactjs中呈现html字符串

我在从Shopify的API中提取HTML时遇到了一个问题。我可以访问ShopifAPI，但它没有以正确的方式呈现信息。当我访问它时，我得到的是带有标记的HTML，而不是为我做格式化的标记。看起来像这样

网站上提供的信息

<p class="p1"><strong>Coolin' for the season.</strong></p> <p class="p1">- True to size fit</p> <p class="p1">- Made with a Champion© 50% cotton/50% polyester hoodie.</p> <p class="p1">- Embroidered front Safe House and "Champion C logo" decoration on the cuff.</p> <p class="p1">- Wash in cold water to prevent shrinkage</p> <p class="p1"><strong>Brought to you exclusively by Safe House Chicago.</strong></p> <p class="p2"> </p> <p class="p1"><strong>*Please allow 14-21 days for delivery for your icey item.*</strong></p> <p class="p2"> </p> <p class="p1"><strong>Model is wearing a size medium</strong></p>

下面是我的代码的外观（稍后我将分开）

ShopProduct.js

import React, { Component } from 'react';
import PageHeader from './PageHeader'
import { fetchSingleProduct, fetchAllProducts } from "../utils/shopifyHelpers"
import styles from '../styles';


export default class ShopProduct extends Component {
  constructor(props){
    super(props);
    this.state = {
      image: '',
      title: '',
      productInfo: ''
    }
  }
  singleProduct(){
    let productDetails
    fetchSingleProduct('7078139269')
    .then((product) => {
      this.setState({
        productInfo: product.description
      })
    })
  }
  componentDidMount(){
    this.singleProduct()
  }


  render() {
    return (
      <div>
        <PageHeader header="Placeholder"/>
        <div className="row">
          <div className="col-sm-6">
            <h1 className="text-center">{this.state.title}</h1>
          </div>
          <div className="col-sm-6">
            <h1 className="text-center">{this.state.productInfo}</h1>
          </div>
        </div>
      </div>
    )
  }
}

import React，{Component}来自'React'；
从“./PageHeader”导入PageHeader
从“./utils/shopifyHelpers”导入{fetchSingleProduct，fetchAllProducts}
从“../styles”导入样式；
导出默认类ShopProduct扩展组件{
建造师（道具）{
超级（道具）；
此.state={
图像：“”，
标题：“”，
产品信息：“”
}
}
单产品（）{
让我们了解产品细节
fetchSingleProduct（'7078139269'）
。然后（（产品）=>{
这是我的国家({
productInfo:product.description
})
})
}
componentDidMount（）{
this.singleProduct（）
}
render（）{
返回(
{this.state.title}
{this.state.productInfo}
)
}
}

---

我需要做什么才能使它正确地呈现信息而不显示所有标记？

要在

HTML

中呈现此字符串，您需要使用

dangerlysetinerhtml

属性，请尝试以下操作：

<div dangerouslySetInnerHTML={{__html: a}}></div>

此处

a

将包含您粘贴到中的字符串

---

检查

jsfiddle

以了解工作示例：

要在

HTML

中呈现此字符串，您需要使用

DangerlySetinerHTML

属性，请尝试以下操作：

<div dangerouslySetInnerHTML={{__html: a}}></div>

此处

a

将包含您粘贴到中的字符串

检查

jsfiddle

了解工作示例：