javascript - 如何使用变量和函数调用将 html 字符串解析到 JSX 客户端

Question

html = "<p>Hello {this.getValue("a")}</p>"

基本上我想要实现的是渲染 html 后 getValue() 函数返回的值。

我尝试了 React HTML 解析器，但这显示了代码中编写的函数名称。

我还尝试了如下危险设置InnerHTML:

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

“dangerouslySetInnerHTML”的结果是相同的字符串

Hello {this.getValue("a")}

该字符串也来自 api 响应

示例:"<div class="test"><span>Overview</span></div><p><b>testing testing</b></p><p>{this.getValue('a')}, testing</p>"

Answer 1

使用模板文字 - 使用反引号 `` 和 ${}:

const getValue = arg => arg + arg;
const html = `<p>Hello ${getValue("a")}</p>`;
document.write(html);