Question

考虑到我们拥有这个组成部分：

const Policy = ({ policy }) => (
    <div dangerouslySetInnerHTML={ { __html: policy } }></div>
)
export default Policy

还有其他一些类似的东西（对于每种情况，h1，h2等）：

import styled from 'styled-components';

const H1 = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

集中标题样式维护的正确方法是什么？

想到的选项：

为/ etc分离并导入相同的CSS，一个为全局，一个为一个范围；
以某种方式将后端HTML数据转换为React / HTML（html-to-react）;
仅将CSS样式注入此Policy组件
其他想法

我正在考虑将这种样式提供给任何h1，h2等使用，但是我不知道我是否在想错，应该为任何情况摆脱这种旧模式原因。

这里的主要讨论是什么是当今集中，设置样式和处理动态html数据以做出反应的最佳方法。

更新：也许createGlobalStyle会是一个很好的选择？

Answer 1

这就是我要做的：

const Policy = ({ className, policy }) => (
    <div className={className} dangerouslySetInnerHTML={{ __html: policy }}></div>
)

const StyledPolicy = styled(Policy)`
  h1 {
    font-size: 1.5em;
    text-align: center;
    color: palevioletred;
  }

  h2 {
    ...
  }
`;

export default StyledPolicy

然后，您无需全局定义CSS。

Answer 2

正如您所提到的，您有几个选项，大多数都是个人首选项。

head

createGlobalStyle

样式。这种方法的优点是它不会呈现阻塞，并且可以使用className轻松确定范围。缺点是它始终位于head中。
使用模块化CSS并在本地范围内定义组件。优点是，如果您使用的是Webpack，则可以延迟导入组件模块，因此仅在需要时才需要样式表，并且它为您提供了根据需要定位:global的选项。缺点是它的渲染阻止（此外，它在下载后仍停留在head中，但是，由于其局部作用域，因此不应干扰其他样式），并且不能选择静态子类名称。
有条件地使用head在react-helmet中添加样式表。这种方法的优点是仅在需要时才在head中。缺点是它可能导致UI闪烁（因为它已经在render方法/ return语句中加载了），必须进行API调用以获取每个（重新）安装的样式表，并且不太可重用，因为它为每个组件实例添加了样式表。

因此，我建议选择选项1。也就是说，如果我使用的是大型样式表，则选择2，即使选择器受到限制也是如此。关于这一点，除非绝对必要，否则我通常不尝试存储字符串化的HTML。处理数据库时，大字符串的检索速度可能很慢，并且取决于用户的设备，显示的速度甚至会更慢。此外，使用dangerouslySetInnerHTML最多可以打开XSS attacks。实际上，我正在制作一个markdown编辑器，该编辑器利用纯文本并将其即时转换为HTML。也许这是一个值得考虑的选项-它也处理HTML，尽管同样会打开XSS漏洞。

所有3个选项的工作演示：

Demo

如何使用样式化组件来全局样式化动态响应数据（dangerouslySetInnerHTML）？

2 个答案: