React.js内联样式最佳做法

有时候，我们需要为组件中的某些元素设置样式，但是如果我们必须仅显示该组件中的某个元素，或者样式是如此之少，则可以使用React js中的内联样式来代替CSS类。reactjs内联样式与HTML内联样式相同，只是属性名称略有不同

使用style = {{prop：“ value”}}在任何标签中编写样式

import React, { Component } from "react";
    import { Redirect } from "react-router";

    class InlineStyle extends Component {
      constructor(props) {
        super(props);
        this.state = {};
      }

      render() {
        return (
          <div>
            <div>
              <div
                style={{
                  color: "red",
                  fontSize: 40,
                  background: "green"
                }}// this is inline style in reactjs
              >

              </div>
            </div>
          </div>
        );
      }
    }
    export default InlineStyle;

内联样式的问题是内容安全策略（CSP）变得越来越普遍，不允许这样做。因此，我建议完全避免使用内联样式。

更新： 为了进一步说明，CSP是服务器发送的HTTP标头，它们限制了页面上可以显示的内容。如果开发人员对站点的编码不正确，则可以将其简单地应用到服务器上，以阻止攻击者做任何顽皮的事情。

这些限制的大多数目的是阻止XSS（跨站点脚本）攻击。XSS是攻击者想出一种在页面上包含自己的JavaScript的方式（例如，如果我输入用户名bob<SCRIPT>alert("hello")</SCRIPT>然后发表评论，而您访问该页面，则该页面不应显示警报）。开发人员应拒绝让用户向网站中添加类似内容的功能，但是如果万一他们犯了一个错误，那么CSP会在发现任何script>标签时阻止该页面加载。

CSP只是对开发人员的一种额外保护，可确保开发人员犯错，即攻击者不会给该站点的访问者带来问题。

因此，所有这些都是XSS，但是如果攻击者不能包含<script>标签，但可以包含<style>标签或style=在标签上包含参数，该怎么办？然后，他也许可以以某种方式来更改网站的外观，从而使您被诱骗单击错误的按钮或其他问题。不必担心，但是仍然需要避免，CSP会为您完成。

https://securityheaders.io/是测试CSP网站的一个很好的资源。

您可以在以下位置阅读有关CSP的更多信息：http : //www.html5rocks.com/zh-CN/tutorials/security/content-security-policy/

与在CSS文件中编写样式相比，React的style属性具有以下优点：

1. 使用javascript工具作为编程语言的能力可以控制元素的样式。这包括嵌入变量，使用条件以及将样式传递给子组件。
2. 一种“组件”方法。为组件编写的HTML，JS和CSS代码不再分开。组件的代码被合并，并写在一个地方。

但是，React的style属性有一些缺点 -您不能

1. 无法使用媒体查询
2. 不能使用伪选择器，
3. 与CSS类相比效率较低。

在JS中使用CSS，您可以获得样式标签的所有优点，而没有这些缺点。到今天为止，js库中有一些受欢迎且受良好支持的CSS，包括：Emotion，Styled-Components和Radium。这些库对CSS来说就像React对HTML一样。它们允许您编写CSS并在JS代码中控制CSS。

让我们比较一下我们的代码在样式简单元素时的外观。我们将设置“ hello world” div的样式，使其在桌面上显示较大，而在移动设备上显示较小。

使用样式属性

return (
   <div style={{fontSize:24}} className="hello-world">
      Hello world
   </div>
)

由于无法在样式标签中进行媒体查询，因此我们必须在元素中添加className并添加CSS规则。

@media screen and (max-width: 700px){
   .hello-world {
      font-size: 16px; 
   }
}

使用Emotion的10 CSS标签

return (
   <div
      css={{
         fontSize: 24, 
         [CSS_CONSTS.MOBILE_MAX_MEDIA_QUERY]:{
            fontSize: 16 
         }
      }
   >
      Hello world
   </div>
)

Emotion还支持模板字符串以及样式化的组件。因此，如果您愿意，可以写：

return (
   <Box>
      Hello world
   </Box>
)

const Box = styled.div`
   font-size: 24px; 
   ${CSS_CONSTS.MOBILE_MAX_MEDIA_QUERY}{
      font-size: 16px; 
   }
`

引擎盖后面的“ JS中的Css”使用css类。情感是专门基于性能而构建的，并使用缓存。与React样式属性相比，JS中的Css将提供更好的性能。

最佳实践

以下是我推荐的一些最佳做法：

1. 如果要内联或在JS中设置元素的样式，请使用css-in-js库，请勿使用style属性。

Should I be aiming to do all styling this way, and have no styles at all specified in my CSS file?

2. If you use a css-in-js solution there is no need to write styles in Css files. Writting your css in JS is superior as you can use all the tools a programming language as JS provides.

should I avoid inline styles completely?

3. Structuring your style code in JS is pretty similar to structuring your code in general. For example:
   • recognize styles that repeat, and write them in one place. There are two ways to do this in Emotion:

// option 1 - Write common styles in CONSTANT variables
// styles.js
export const COMMON_STYLES = {
   BUTTON: css`
      background-color: blue; 
      color: white; 
      :hover {
         background-color: dark-blue; 
      }
   `
}

// SomeButton.js
const SomeButton = (props) => {
   ...
   return (
      <button
         css={COMMON_STYLES.BUTTON}
         ...
      >
         Click Me
      </button>
   )
}

// Option 2 - Write your common styles in a dedicated component 

const Button = styled.button`
   background-color: blue; 
   color: white; 
   :hover {
      background-color: dark-blue; 
   }   
`

const SomeButton = (props) => {
   ...
   return (
      <Button ...> 
         Click me
      </Button>
   )
}

• React coding pattern is of encapsulated components - HTML and JS that controls a component is written in one file. That is where your css/style code to style that component belongs.

• 必要时，在组件中添加样式道具。这样，您可以重用子组件中编写的代码和样式，并由父组件根据您的特定需求对其进行自定义。

const Button = styled.button([COMMON_STYLES.BUTTON, props=>props.stl])

const SmallButton = (props)=>(
   <Button 
      ...
      stl={css`font-size: 12px`}
   >
      Click me if you can see me
   </Button>
)

const BigButton = (props) => (
   <Button
      ...
      stl={css`font-size: 30px;`}
   >
      Click me
   </Button>
)

我通常有与每个React组件相关联的scss文件。但是，我不明白为什么您不使用逻辑封装组件并查看它的原因。我的意思是，您对Web组件也有类似的看法。

您可以使用内联样式，但是如果在所有样式中都使用它们，则会受到一些限制，一些已知的限制是您不能在其中使用CSS伪选择器和媒体查询。

您可以使用Radium 来解决此问题，但我仍然觉得该项目的发展会变得麻烦。

我建议使用CSS模块。

使用CSS模块，您将可以自由地在CSS文件中编写CSS，而不必担心命名冲突，CSS模块会注意这一点。

此方法的优点是，它为您提供了特定组件的样式功能。这将为下一开发人员创建更多可维护的代码和可读的项目体系结构。

根据您的配置，内联样式可以为您提供热重装。每次样式更改时，网页都会立即重新呈现。这有助于我更快地开发组件。话虽如此，我相信您可以为CSS + SCSS设置热重载环境。

这是JSX语法中基于布尔的样式：

style={{display: this.state.isShowing ? "inherit" : "none"}}

我在React组件中广泛使用内联样式。我发现将样式并置在组件中非常清晰，因为它总是清楚组件使用和不使用哪种样式。加上手头的Java脚本的全部功能确实简化了更复杂的样式需求。

一开始我并没有说服，但是经过数月的摸索之后，我已经完全转换，并且正在将所有CSS转换为内联或其他JS驱动的CSS方法。

Facebook员工和React贡献者“ vjeux”的演示也非常有帮助— https://speakerdeck.com/vjeux/react-css-in-js

样式属性的主要目的是用于基于状态的动态样式。例如，您可以在进度条上基于某种状态设置宽度样式，或者根据其他状态设置位置或可见性。

JS中的样式强加了限制，即应用程序无法为可重用组件提供自定义样式。在上述情况下，这是完全可以接受的，但是当您更改可见特性（尤其是颜色）时，这是完全可以接受的。

詹姆斯·K·尼尔森（James K Nelson）在他的信“为什么不应该使用JavaScript设置React组件样式”中指出，实际上并不需要使用内联样式。他的说法是，使用较少的/ scss的旧无聊的css是最佳解决方案。他的论文部分支持CSS：

• 可外部扩展
• 适用（内联样式会覆盖所有内容）
• 设计师友好