为什么我动态生成的 HTML 内容没有出现在 React 组件中？ [重复]

Question

我正在构建一个 React 应用程序，我需要根据用户交互动态插入一些 HTML 内容。这是我正在尝试做的事情的简化版本：

import React, { useState } from 'react';

function ContentDisplay() {
    const [content, setContent] = useState('');

    const generateContent = () => {
        const newContent = '<p>This is a dynamically generated paragraph.</p>';
        setContent(newContent);
    };

    return (
        <div>
            <button onClick={generateContent}>Generate Content</button>
            <div>{content}</div>
        </div>
    );
}

export default ContentDisplay;

我希望单击按钮后 HTML 内容会在 div 内呈现，但它只是将 HTML 显示为字符串。如何使动态生成的内容显示为实际的 HTML 而不是纯文本？

Answer 1

这是预期的行为，它是 React 避免从用户输入注入 HTML 值的机制。恶意用户可以利用它进行 XSS 攻击。

如果您确实想这样做，并且可以控制如何执行此操作：

import React, { useState } from 'react';

function ContentDisplay() {
    const [content, setContent] = useState('');

    const generateContent = () => {
        const newContent = '<p>This is a dynamically generated paragraph.</p>';
        setContent(newContent);
    };

    return (
        <div>
            <button onClick={generateContent}>Generate Content</button>
            <div dangerouslySetInnerHTML={{__html: content}} />
        </div>
    );
}

export default ContentDisplay;