React 实现 Vue 中 v-html 指令

dangerouslySetInnerHTML

React默认将过滤所有包含可能的XSS脚本，将转义所有富文本内容。

使用React提供的dangerouslySetInnerHTML指令，可能绕过这个限制。传入{__html}。

export default function Page({html}: {html?: string}) {
    return (
        <>
            <div>
                {
                    html && <div dangerouslySetInnerHTML={{__html: html}}/>
                }
            </div>
        </>
    )
}

注意

在组件中使用{}进入JS/TS模式，然后再传入{__html}对象，所以可以看到dangerouslySetInnerHTML有两个大括号。