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

前往低代码交流专区

更多推荐