乐闻世界logo
搜索文章和话题

Why styles don't apply on dangerouslySetInnerHTML using reactjs

2 个月前提问
21 天前修改
浏览次数42

1个答案

1

dangerouslySetInnerHTML 是 React 中用来直接在组件内部插入 HTML 字符串的属性。使用这个属性可以绕过 React 的虚拟 DOM,直接向真实 DOM 中插入未经转义的 HTML,这就带来了潜在的跨站脚本(XSS)攻击的风险。因此,使用时需要格外小心,确保内容是安全的。这也是属性名中包含 "dangerously" 的原因。

关于你的问题,为什么不能用 dangerouslySetInnerHTML 设置样式,这主要是因为 dangerouslySetInnerHTML 的用途和工作方式。这个属性接受一个对象,该对象的 __html 键包含一个字符串,该字符串表示要插入的 HTML。它是直接作用于元素的内部 HTML 的,而不是用来处理样式。

如果你想通过 dangerouslySetInnerHTML 来间接设置样式,你可以包含一些内联样式的 HTML 标签,如:

jsx
function MyComponent() { return ( <div dangerouslySetInnerHTML={{ __html: '<style>.myClass { color: red; }</style><div class="myClass">Hello World</div>' }} /> ); }

在这个例子中,我们通过 dangerouslySetInnerHTML 插入了一个 <style> 标签来定义样式,然后使用这个样式。然而,这种做法并不是推荐的,因为它可能会导致样式污染,影响其他部分的样式,并且难于维护和调试。

通常来说,如果需要设置样式,应该使用 React 的内置 style 属性或者通过引入 CSS 文件来定义样式。这些方法更为安全,且更易于管理和维护。例如:

jsx
function MyComponent() { return ( <div style={{ color: 'red' }}> Hello World </div> ); }

或者,使用 CSS 类:

css
/* styles.css */ .myClass { color: red; }
jsx
import './styles.css'; function MyComponent() { return ( <div className="myClass"> Hello World </div> ); }

这些方法都是改变 React 组件样式的标准和推荐方式。

2024年6月29日 12:07 回复

你的答案