Как разобрать строку html на стороне клиента JSX с помощью переменной и вызова функции

Question

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

В основном я хочу достичь значения, возвращаемого функцией getValue () после рендеринга html.

Я попытался отреагировать анализатором HTML, однако при этом отображается имя функции в том виде, в каком оно написано вкод.

Я также попытался использовать dangerouslySetInnerHTML, как показано ниже:

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

Результатом с "dangerouslySetInnerHTML" является та же строка

Hello {this.getValue("a")}

Также строка изapi response

пример: "<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);