react通过dangerouslySetInnerHTML加载html，html中写的js方法无效

Question

react通过dangerouslySetInnerHTML加载html，html中写的js方法无效

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

在使用React的dangerouslySetInnerHTML属性时，如果HTML中的JavaScript代码无法正常执行，可能的原因有以下几点：

1. 未正确导入JavaScript模块：确保你在渲染组件之前正确地导入了JavaScript模块。例如，如果你正在使用React Router，你需要在你的组件开始处引入它。

import { BrowserRouter as Router, Route } from 'react-router-dom';

1. 不正确的语法或类型错误：确保你的JavaScript代码符合React和ES6+规范，并且没有出现任何类型的错误。例如，你可能需要确保变量是字符串而不是数字等。

2. 错误处理：在JavaScript代码中添加适当的错误处理逻辑，以便当发生错误时能够捕获并显示提示信息给用户。这可以通过使用try...catch语句来实现。

3. 异步操作：如果涉及的是一个异步操作（比如从服务器获取数据），确保你的JavaScript代码已经准备好接收响应。否则，可能会导致运行时错误。

4. 外部依赖项问题：如果JavaScript代码依赖于第三方库或服务，确保这些库和服务已经在你的环境中正确安装和配置。

示例代码：

import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <p>Click the button to see the alert:</p>
        <button onClick={() => this.setState({ message: "Hello, React!" })}>
          Click me
        </button>

        <pre>{JSON.stringify(this.state)}</pre>
      </div>
    );
  }
}

export default class App extends Component {
  state = {
    message: '',
  };

  componentDidMount() {
    // 在这里写你的JavaScript代码，以确保它可以被安全地插入到DOM中。
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.message !== this.state.message) {
      console.log('Message changed');
    }
  }

  componentWillUnmount() {
    console.log('Component will be unmounted');
  }

  render() {
    const html = `<h1>${this.state.message}</h1>`;
    return (
      <div dangerouslySetInnerHTML={{ __html: html }} />
    );
  }
}

在这个例子中，我们首先在MyComponent类组件中创建了一个简单的JSX元素，然后在App组件中使用dangerouslySetInnerHTML属性将这个JSX元素传递给<div>标签。这样就可以在实际的页面上看到结果。注意，在render()函数中我们还包含了对状态变化的监听，以及如何在组件卸载时清理内存。