dangerouslySetInnerHTML 怎么用

`dangerouslySetInnerHTML` 是 React 中的一个属性，用于将 HTML 字符串直接插入到组件中的 DOM 元素中。需要注意，使用 `dangerouslySetInnerHTML` 带来了潜在的安全风险，因此应该谨慎使用并确保所插入的内容是可信的。

要使用 `dangerouslySetInnerHTML` 属性，你需要将它作为目标 DOM 元素的属性之一，并传递一个对象作为其值。该对象包含一个 `__html` 属性，其值是你希望插入的 HTML 字符串。

下面是一个示例：

import React from 'react';

function App() {
  const htmlString = '<strong>Hello, world!</strong>';

  return <div dangerouslySetInnerHTML={{ __html: htmlString }} />;
}

export default App;

在上面的示例中，我们定义了一个包含 HTML 标签的字符串 `htmlString`。然后，我们使用 `dangerouslySetInnerHTML` 属性将该字符串插入到 `<div>` 元素中。

需要注意的是，由于使用了 `dangerouslySetInnerHTML`，React 不会对插入的内容进行转义或处理。这意味着你需要确保所插入的内容是安全的，并且不会引起潜在的安全漏洞。

另外，请在必要时使用 `dangerouslySetInnerHTML`，而不是将其作为默认方法来处理动态内容。通常情况下，React 提倡使用组件化和属性来管理内容和渲染逻辑。只在特殊情况下，当你确实需要直接插入 HTML 字符串时，才使用 `dangerouslySetInnerHTML`。