# 警告: ReactDOM: 期望 `dangerouslySetInnerHTML` 是一个字符串，但得到了 `object`。

- **ID:** `react/warning-react-dom-production-minification-issue`
- **领域:** react
- **类别:** runtime_error
- **验证级别:** ai_generated
- **修复率:** 93%

## 根因

`dangerouslySetInnerHTML` 属性期望一个包含 `__html` 键的对象，其值为字符串，但传递了原始对象或非字符串值，通常是由于误用该属性或传递了组件/JSX 元素而不是 HTML 字符串。

## 版本兼容性

| 版本 | 状态 | 引入 | 弃用 |
|------|------|------|------|
| React 18.2.0 | active | — | — |
| React 17.0.2 | active | — | — |
| React 16.14.0 | active | — | — |

## 解决方案

1. ```
   Correct the usage: pass an object with __html key containing a sanitized HTML string. Example: <div dangerouslySetInnerHTML={{ __html: '<p>Hello</p>' }} />
   ```
2. ```
   If you're trying to render React components dynamically, use a different approach like using a state variable or a render prop instead of dangerouslySetInnerHTML.
   ```
3. ```
   Sanitize the HTML string using a library like DOMPurify before passing it to dangerouslySetInnerHTML to prevent XSS attacks.
   ```

## 无效尝试

- **Pass a plain string directly to dangerouslySetInnerHTML without the __html wrapper** — dangerouslySetInnerHTML requires an object with __html key; passing a string directly will cause a different error. (95% 失败率)
- **Use innerHTML property directly on the DOM element via ref** — Direct DOM manipulation bypasses React's reconciliation and can lead to inconsistencies, but it's also not the intended fix for this warning. (85% 失败率)
- **Ignore the warning because the HTML still renders** — The warning indicates a potential XSS vulnerability or incorrect rendering; ignoring it can lead to security issues or broken UI. (90% 失败率)