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，以提醒自己这是危险的。