React里面也有与Vue里面的v-html类似的东西,就是dangerouslySetInnerHTML。

dangerouslySetInnerHTML的作用:

它是React为浏览器DOM提供的innerHTML的替换方案。

通常来讲,使用代码直接设置HTML存在风险,因为很容易无意中使用用户暴露于跨站脚本(XSS)的攻击。

因此,你可以直接在React中设置HTML,但当你想设置dangerouslySetInnerHTML时,需要向其传递包含key为 _html 的对象,依此来警示。

dangerouslySetInnerHTML的使用方法:
render() {
	const val = `
	测试第一行</br>
	测试第二行</br>
	测试第三行</br>
	测试第四行</br>
	`
	return (
		<div dangerouslySetInnerHTML={{__html: `<div>${val}</div>`}} />
	)
}

此方法类似于vue的v-html。

PS:在开发过程中尽量少用。
Logo

一站式虚拟内容创作平台,激发创意,赋能创作,进入R空间,遇见同道,让优质作品闪耀发光。​

更多推荐