[英]Convert template literal to string
我有一个 React 组件,它在其中接收一个道具codeBlock
,然后将其存储在组件的 state 中。
它具有以下结构:
codeBlock = {
code: `<div></div>`,
language: 'html'
}
我想将这个模板文字字符串codeBlock.code
转换为 html 元素,这样当我在呈现元素时添加/追加它时,我将获得 DOM 元素而不是文字字符串。
到目前为止我尝试过的事情,
在componentDidMount()
中,我尝试了两种不同的方法:-
componentDidMount() {
const parser = new DOMParser();
const output = parser.parseFromString(this.state.codeBlock.code, 'text/html');
this.setState({
output
});
}
此方法不起作用并抛出此错误:对象作为反应子项无效(找到:[object htmldocument])
componentDidMount() {
this.setState({
output: String.raw `${this.state.codeBlock.code}`
});
}
此方法按原样打印模板字符串并且不创建任何元素。
在下面的代码部分中,它应该呈现为 html 元素而不是字符串。
您可以使用innerHTML
。
HTML:
<div id="elem"></div>
记者:
const codeBlock = {
code: `<div class="container"></div>`,
language: 'html'
}
const elem = document.getElementById("elem");
elem.innerHTML = codeBlock.code;
最好的解决方案是不传递字符串而是传递 React 元素(或两者):
codeBlock = {
code: "<div></div>", // string here
rendered: <div></div>, // jsx here
language: 'html'
}
您可以轻松地将其渲染到 React 组件中。 但是,如果您真的必须处理 html 的字符串(正如名称codeBlock
和其他语言的可用性所暗示的那样),您将不得不使用innerHTML
或 React 的等价物dangerouslySetInnerHTML
。
请注意,字符串值最初是使用模板文字语法创建的并不重要(或帮助)。 它对接收字符串的组件没有影响。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.