ReactJSのJSONレスポンスからHTMLテンプレートをレンダリングしてデータをバインドする方法は？

Question

私はreactjsを使用してHTMLテンプレートをレンダリングする必要があります。 HTMLテンプレートは動的で、API呼び出しを経由します。 htmlでデータをバインドするためのテンプレートが用意されています。次のように サンプルHTMLテンプレート、次のようにここで

<a target="_blank" href="{ad.url}"> 
    <div class="ads temp-1"> 
     <h2>{ad.name}</h2> 
     <div class="adv-content"> 
      <div class="advs-image"> 
       <img src="{ad.image}" /> 
      </div> 
      <div class="adv-desc">{ad.description}</div> 
     </div> 
    </div> 
</a> 

adは、プロパティurlを含むオブジェクトであるimage、name、descriptionなど、ある

はサンプルadオブジェクトが

var ad = { 
    "image": "testimage.jpg", 
    "url": "http: //google.com", 
    "name": "testadvertisement", 
    "description": "testdescription" 
} 

、あります私はAngularJsで$compileサービスを使ってこれを達成しました。

ここで私はこれをreactjsに移したいと思います。 私はreactjs関数renderを使ってレンダリングしようとしましたが、それは役に立たなかった。これはhtmlを文字列としてレンダリングします。

reactjsにはどのようなコンパイル機能がありますか？または、この正しい方法で他の方法を提案してもらえますか？

助けてください。

Answer 1

私は正確にundestandとしてdangerouslySetInnerHTML小道具を使用する必要があります。例えば

：

// SomeComponent.js 

// other methods... 

render() { 
    // `htmlFromResponse` is your plain html string from response. 
    return (
    <div dangerouslySetInnerHTML={{ __html: htmlFromResponse }} /> 
); 
} 

この小道具を使って、div要素にプレーンなHTML文字列をレンダリングすることができます。

---

サーバーからHTMLテンプレートを取得し、レンダリングの前にそれに変数を渡したいしている場合、あなたはMustacheパッケージでそれを行うことができます。

import Mustache from 'mustache'; 

// template should contain variables in {{ ... }} 
const html = Mustache.render(htmlFromServer, { 
    variable: 'value' 
}); 

次は、dangerouslySetInnerHTMLを使用して出力htmlをレンダリングすることができます小道具

Answer 2

HTMLデータをレンダリングする反応コンポーネントを作成し、次にJsonデータをPropとしてコンポーネントに渡します。 React要素にデータへのアクセスが与えられ、Jsonデータが変更されたときにレンダリングされたHTMLが自動的に更新されます。

チェックアウトはいくつかの理由なぜあなたがあることがあなたに小道具

https://jsfiddle.net/abhirathore2006/6a403kap/

var Hello = React.createClass({ 
    render: function() { 
    console.log(this.props) 
    return <div>Hello {this.props.name} 
    <h5>{this.props.d1.name}</h5> 
    id:{this.props.d1.id} 
    </div>; 
    } 
}); 

ReactDOM.render(
    <Hello name="World" d1={{"name":"test","id":"5"}} />, 
    document.getElementById('container') 
);