React.js dangerouslySetInnerHTML 導致 [object Error] {}

Question

我正在使用 React。 我在 state 中有一個字符串變量，其中包含 HTML 文本。 此文本發生變化，因此我需要能夠將其插入到我的頁面中並使其呈現為 HTML，而不僅僅是一串文本。 雖然我找到了一些第三方解決方法，但最直接的選擇似乎是使用dangerouslySetInnerHTML屬性。 但是當我這樣做時，整個頁面都消失了，我的控制台顯示

 // [object Error]
 {}

這是我嘗試做的產生相同結果的示例。

const root = ReactDOM.createRoot(document.getElementById("wrapper"));

class Tester extends React.Component {
  constructor(props) {
    super(props);
    this.state = { num: 1, html: "<b>Odd</b>" };
  }
  handleClick() {
    let num = this.state.num + 1;
    let html = "<b>Odd</b>";
    if (num % 2 == 0) {
      html = "<i>Even</i>";
    }
    this.setState({ num: num, html: html });
  }
  render() {
    return (
      <div>
        <h1>Hello {this.state.num}</h1>{" "}
        <button onClick={this.handleClick.bind(this)}>Click</button>
        {/*<div>{this.state.html}</div>*/}
        <div dangerouslySetInnerHTML={{ __HTML: this.state.html }}></div>
      </div>
    );
  }
}

root.render(<Tester />);

我會注意到我在 CodePen 工作，但這似乎不是問題所在。 我發現其他人使用這種方法效果很好。 該 CodePen 的鏈接是https://codepen.io/chefdaddyjay/pen/RwyxgeE如果您將上面代碼中的注釋向下移動一行，它會起作用，但會清楚地顯示 HTML 標簽。

Answer 1

括號內的“html”應該像這樣小寫

<div dangerouslySetInnerHTML={{ __html: this.state.html }}></div>

根據文檔https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml （強調我的）

您必須輸入 dangerouslySetInnerHTML 並傳遞帶有__html鍵的 object，以提醒自己這是危險的。