Shopify APIからのHTMLのレンダリング

Question

ShopifyのAPIからプルするときにHTMLをレンダリングするのに問題があります。私はShopify APIにアクセスできますが、情報を正しい方法で表示しているわけではありません。私がアクセスすると何が起こるのですか？私のために書式を設定しているタグではなく、タグでHTMLを取得していますか？それはこのように見えます。ウェブサイト私は情報が

Coolin' for the season. 

- True to size fit 

- Made with a Champion© 50% cotton/50% polyester hoodie. 

- Embroidered front Safe House and "Champion C logo" decoration on the cuff. 

- Wash in cold water to prevent shrinkage 

Brought to you exclusively by Safe House Chicago. 



*Please allow 14-21 days for delivery for your icey item.* 



Model is wearing a size medium 

を提示したいどのように

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

私はそれが適切にすべてのタグなしの情報をレンダリングするために実行する必要がありますか？ HTMLにこの文字列を描画するのに

Answer 1

、あなたがdangerouslySetInnerHTMLプロパティを使用する必要があり、これを試してみてください。

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

ここaあなたはQUESに貼り付けた文字列が含まれています。ワーキング例えば

チェックjsfiddle：これは働いていたhttps://jsfiddle.net/dd1ckue2/