javascript - 如何在 ReactJS 中呈现 HTML 模板并绑定(bind)来自 JSON 响应的数据？

Question

我必须使用 reactjs 呈现 HTML 模板。 HTML 模板是动态的，通过 API 调用获得。模板中有规定可以绑定(bind) 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 等

示例广告对象如下，

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

我在 AngularJs 中使用 $compile 服务实现了这一点。

现在我想把它移到 reactjs。我尝试使用 reactjs render 函数进行渲染，但没有帮助。它将 html 呈现为字符串。

reactjs 中有类似编译的函数吗？或者您能否建议任何其他方法来正确执行此操作？

感谢任何帮助。

Answer 1

据我正确理解，您应该使用 dangerouslySetInnerHTML 属性。

例如:

// SomeComponent.js

// other methods...

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

使用此属性，您可以将纯 html 字符串渲染到 div 元素中。

---

如果你从服务器获取 html 模板，并想在渲染之前将变量传递给它，你可以使用 Mustache 包来完成:

import Mustache from 'mustache';

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

接下来，您可以使用 dangerouslySetInnerHTML 属性呈现输出 html。