將模板文字轉換為字符串

Question

我有一個 React 組件，它在其中接收一個道具codeBlock ，然后將其存儲在組件的 state 中。

它具有以下結構：

codeBlock = {
  code: `<div></div>`,
  language: 'html'
}

我想將這個模板文字字符串codeBlock.code轉換為 html 元素，這樣當我在呈現元素時添加/追加它時，我將獲得 DOM 元素而不是文字字符串。

到目前為止我嘗試過的事情，

在componentDidMount()中，我嘗試了兩種不同的方法：-

1. 使用 DOMParser：

componentDidMount() {
  const parser = new DOMParser();
  const output = parser.parseFromString(this.state.codeBlock.code, 'text/html');
  this.setState({
    output
  });
}

此方法不起作用並拋出此錯誤：對象作為反應子項無效（找到：[object htmldocument]）

2. 使用 String.raw：

componentDidMount() {
  this.setState({
    output: String.raw `${this.state.codeBlock.code}`
  });
}

此方法按原樣打印模板字符串並且不創建任何元素。

截屏：

在下面的代碼部分中，它應該呈現為 html 元素而不是字符串。

Answer 1

您可以使用innerHTML 。

HTML：

<div id="elem"></div>

記者：

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

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

Answer 2

最好的解決方案是不傳遞字符串而是傳遞 React 元素（或兩者）：

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

您可以輕松地將其渲染到 React 組件中。 但是，如果您真的必須處理 html 的字符串（正如名稱codeBlock和其他語言的可用性所暗示的那樣），您將不得不使用innerHTML或 React 的等價物dangerouslySetInnerHTML 。

請注意，字符串值最初是使用模板文字語法創建的並不重要（或幫助）。 它對接收字符串的組件沒有影響。