react项目class类中 dangerouslysetinnerhtml 中的点击事件的实现

在 React 的 class 组件中使用 `dangerouslySetInnerHTML` 属性可以设置 HTML 字符串作为组件的子元素，但是需要注意安全问题。

如果需要在 `dangerouslySetInnerHTML` 中添加点击事件，可以在组件挂载后通过 DOM 操作给元素绑定事件。例如，在组件的 `componentDidMount` 生命周期中获取元素并添加点击事件：

class MyComponent extends React.Component {
  componentDidMount() {
    // 获取元素
    const myElement = document.getElementById('my-element');
    // 给元素添加点击事件
    myElement.addEventListener('click', this.handleClick);
  }

  handleClick = (event) => {
    console.log('点击事件触发了', event);
  }

  render() {
    const htmlString = '<div id="my-element">点击我</div>';
    return <div dangerouslySetInnerHTML={{ __html: htmlString }} />;
  }
}

在上面的代码中，组件的 `render` 方法返回一个包含 HTML 字符串的 `div` 元素，并使用 `dangerouslySetInnerHTML` 属性将字符串设置为元素的子元素。在组件挂载后，通过 `document.getElementById` 获取元素并使用 `addEventListener` 给元素添加点击事件。点击事件的处理函数是 `handleClick`，并且使用箭头函数绑定了 `this`。

需要注意的是，使用 `dangerouslySetInnerHTML` 属性可能存在安全风险，因为它允许渲染未经过过滤的 HTML 字符串。如果需要渲染用户输入的数据，建议使用 React 提供的 `dangerouslySetInnerHTML` API 进行过滤和转义。