在react项目中,有的时候字符串中有HTML标签,如果直接输出字符串的话,那HTML标签就会被当成一个字符串。这显然不是我们想要的效果,所以我们需要用到
dangerouslySetInnerHTML 这个属性来将dom字符串渲染出来。
dangerouslySetInnerHTML
dangerouslySetInnerHTML
是 React 为浏览器 DOM 提供 innerHTML
的替换方案。通常来讲,使用代码直接设置 HTML 存在风险,因为很容易无意中使用户暴露于跨站脚本(XSS)的攻击。因此,你可以直接在 React 中设置 HTML,但当你想设置 dangerouslySetInnerHTML
时,需要向其传递包含 key 为 __html
的对象,以此来警示你。例如:
1 function createMarkup() { 2 return {__html: 'First · Second'}; 3 } 4 5 function MyComponent() { 6 return <div dangerouslySetInnerHTML={createMarkup()} />; 7 }
使用例子:
1 // js 2 3 const Str = '需要鼠标<br/>需要特别检查摄像头<br/>需要电脑包<br/>测试机转租赁,序列号:XKS2014' 4 5 6 // 输出 7 8 <span dangerouslySetInnerHTML={{__html: Str}}></span> 9 10 11 //结果 12 13 // 需要鼠标 14 // 需要特别检查摄像头 15 // 需要电脑包 16 // 测试机转租赁,序列号:XKS2014