Javascript 将模板文字转换为字符串

我有一个React组件，它在其中接收一个prop

codeBlock

，然后以组件的状态存储

其结构如下：

代码块={
代码：``，
语言：“html”
}

我想将这个

codeBlock.code

这是一个模板文本字符串转换成一个html元素，这样当我在呈现元素时添加/附加它时，我将得到DOM元素而不是文本字符串

到目前为止我试过的东西

在

组件didmount（）

中，我尝试了两种不同的方法：-

使用DOMParser：

componentDidMount（）{
const parser=new DOMParser（）；
const output=parser.parseFromString（this.state.codeBlock.code，'text/html'）；
这是我的国家({
输出
});
}

此方法无效，并引发以下错误： 对象作为react子对象无效（找到：[object htmldocument]）

使用String.raw：

componentDidMount（）{
这是我的国家({
输出：String.raw`${this.state.codeBlock.code}`
});
}

此方法按原样打印模板字符串，不创建任何元素

截图：

---

在下面的代码部分中，它应该呈现为html元素而不是字符串。

您可以使用

innerHTML

HTML:

JS:

const代码块={
代码：``，
语言：“html”
}
常量elem=document.getElementById（“elem”）；
elem.innerHTML=codeBlock.code；
最好的解决方案不是传递字符串，而是传递React元素（或两者都传递）：

代码块={
代码：，//此处为字符串
呈现：，//jsx此处
语言：“html”
}

这可以轻松渲染为React组件。但是，如果您确实需要处理一个html字符串（如名称
codeBlock
，以及其他语言的可用性所示），则必须使用
innerHTML
或React的等效代码

请注意，字符串值最初是使用模板文字语法创建的，这无关紧要（或有帮助）。它对接收字符串的组件没有影响。
您尝试了什么？@laruiss我已经更新了问题。很抱歉，我之前提供的关于这个问题的信息较少。不清楚“html字符串”是什么意思。第一次尝试创建的是DOM元素，而不是字符串。模板文本表达式生成的值已经是一个字符串，您可以像任何其他字符串一样使用它（而且
string.raw
的使用方式没有意义）@Bergi By html string我指的是实际的元素，所以当添加到DOM中时，它会作为元素而不是字符串呈现。假设这是我想要呈现的
，它应该使用类容器创建一个元素，而不实际呈现给定的字符串。很抱歉，这不起作用，因为它在react组件中，前面我没有给出整个场景，对此表示抱歉。请检查更新的问题。使用
innerHTML
也不符合React的设计模式。处理此问题的最佳方法是从
render（）
函数中有条件地呈现它。@Brett84c，这不是他的错，前面我没有在问题中包括整个场景。虽然我没有得到条件渲染点。您能详细说明一下吗？您是否正在尝试根据从服务器调用的特定数据动态创建html？你不能直接将这个html添加到
render（）
函数中它需要放置的位置吗？@Bergi我同意，这就是为什么在提供更多信息之前我试图澄清他们试图做什么的原因。在这一点上，听起来他们想从服务器获取html，并将其设置在DOM中，这仍然与React的设计模式不一致，但仍然可以通过名为“危险的html”
的方法进行设置。有一次我想到了这一点，但希望尽可能减少我的代码，这就是我遇到这个问题的原因。我也会用另一种方式检查。谢谢。@Prathameskoshti仍然不清楚
代码块是在某个地方硬编码的（可能是少数几个选项之一），还是完全动态生成的数据。顺便说一句，如果您不关心空格，那么应该可以从jsx元素值重构字符串。您是对的，代码是硬编码的，实际上我关心这里的空格，因为我想打印代码以及代码的输出，我已经在问题
危险的SetinenerHTML
中附上了屏幕截图。这个方法提供了我想要的输出。谢谢你的帮助。但我不确定我是否应该在代码中使用它。但是代码总是硬编码的，所以我认为这不应该是问题所在！你对此有何看法？是的，如果html是硬编码的，并且任何更改代码的人都会记住它的使用方式，那么这不是问题。在使用jsx的同时使用它会强调使用，但当然会导致重复。这是一种权衡。
<div id="elem"></div>

const codeBlock = {
  code: `<div class="container"></div>`,
  language: 'html'
}

const elem = document.getElementById("elem");
elem.innerHTML = codeBlock.code;

codeBlock = {
  code: "<div></div>", // string here
  rendered: <div></div>, // jsx here
  language: 'html'
}