React 中的内联样式

2019-06-18 08:00:00 · 飞浪

介绍层叠样式表（通常称为CSS）是Web开发的重要组成部分。有句名言说：“盒子有助于销售珠宝”，CSS也是如此。虽然功能是现代Web开发的一个重要方面，但我们呈现内容的方式也同样重要

介绍

层叠样式表（通常称为 CSS）是 Web 开发的重要组成部分。

有句名言说：“盒子有助于销售珠宝”， CSS 也是如此。虽然功能是现代 Web 开发的一个重要方面，但我们呈现内容的方式也同样重要。

使用 CSS，我们可以定义文档的呈现方式，即控制网页上元素格式的一组规则。通过使用 CSS 技术，我们可以使网页更具吸引力和效率。

在开始之前，我们先来讨论一下 React。它是一个用于构建用户界面的流行 JavaScript 库。它基本上处理应用程序的视图层。最好的部分是它允许您将组件分解为更小的可重用组件。与将所有逻辑放入单个文件中相比，编写较小的组件具有更好的优势。通过编写封装良好的组件，我们本质上是在制作一个可测试的应用程序，具有良好的关注点分离和最大限度的代码重用。

使用 React 定义 CSS 的方式：

设置 React 组件样式的方法有很多种，以下是常见的几种：

内联 CSS
CSS 样式表
CSS 模块
JS 中的 CSS

我不会深入讨论它们之间的细节和区别，因为这主要取决于用例和应用程序类型，但我会说 JS 中的 CSS（尤其是 Styled-Component）是一种更好的（常见的）样式方式。

内联 CSS

内联 CSS 意味着使用带有 HTML 标签的样式属性来定义 CSS 属性，或者将样式直接添加到元素中。使用纯 HTML，我们为样式属性分配一个字符串值。该字符串将包含 CSS 属性值对；每个属性将用分号相互分隔。以下是显示格式化“Hello World”的基本页面示例：

      <!DOCTYPE html>
<html>
  <head>
    <title>Inline CSS</title>
  </head>
  <body>
    <p style="font-size: 20px; color:#4a54f1; text-align:center; padding-top:100px;">
      Hello World!!!
    </p>
  </body>
</html>
    

使用 React 定义内联样式

现在我们进入了主要讨论。使用 React，我们指定 CSS 的方式与指定纯 HTML 的方式不同。在详细介绍之前，我想快速提醒您，我们不使用 React 编写 HTML，而是编写 JSX。我的意思是 JSX 将被转换为React.createElement(....)并且所有属性都将成为 props 对象的一部分。

在 React 中，内联样式不指定为字符串。style 属性接受具有 camelCased 属性的 JavaScript 对象。

例如： margin-top -> marginTop ， border-radius -> borderRadius ， font-weight -> fontWeight ， background-color -> backgroundColor

以下是定义内联 CSS 的基本步骤：

将 CSS 属性名称更改为其驼峰式版本，例如将“background-color”更改为“backgroundColor”，将“font-size”更改为“fontSize”等。
创建一个以所有 CSS 属性作为键并包含其 CSS 值的对象。
将该对象分配给样式属性。

我们不需要对“颜色”、“边框”、“背景”等属性做任何改变。

为了获得相同格式的“Hello World”输出，我们需要以这种方式编写一个 React 组件：

      import React from 'react';
import ReactDOM from 'react-dom';
 
function HelloWorld() {
  const styleObj = {
    fontSize: 14,
    color: "#4a54f1",
    textAlign: "center",
    paddingTop: "100px",
}
  return(
    <p style={styleObj}>Hello World!!!</p>
)
}
  /*
Instead of creating a separate object, we can write it in this way also:
  <p style={{ fontSize: 14, color: "#4a54f1", textAlign: "center", paddingTop: "100px" }}>Hello World!!!</p>
For better readability, define it separately.
  */
  ReactDOM.render(<HelloWorld />, document.getElementById('app'));
    

如果你看一下上面的代码，你会注意到，对于 fontSize，我没有使用任何单位，只是为 paddingTop 分配了一个数字和一个字符串。我是故意这样做的。基本上，这个想法是：

React 会自动为某些数字内联样式属性添加“px”后缀。如果您想使用除“px”以外的单位，请将值指定为带有所需单位的字符串。但也有一些例外，一些 CSS 属性是无单位的，请在此处查看无单位属性的完整列表。

有用的场景

现在，假设我们想要动态计算或修改给定项目的 CSS 属性。例如，如果我们想要更改字体颜色、在某些条件下切换显示属性/背景图像、更改元素的宽度或高度等，那么使用内联 CSS 可以轻松实现。

这是另一个 eExample，假设我们有一个待办事项列表。每项任务可以有几个状态，可以是已完成，也可以是暂不完成。为了区分，我们可以用红色突出显示待完成的任务。

      import React from 'react';
import ReactDOM from 'react-dom';
 
const todoList = [{ title: 'item 1', isDone: false }, { title: 'item 2', isDone: true }]
 
function TodoItem({ title, isDone }) {
  return (
    <div>
      <p style={{ color: isDone? 'green': 'red' }}>{title}</p>
    </div>
)
 }
 
function Todo(props) {
  const todoList = props.todoList.map(el => <TodoItem key={el.id} title={el.title} isDone={el.isDone} />)
  return <div>{todoList}</div>
}
 
ReactDOM.render(<Todo todoList={todoList} />, document.getElementById('app'));
    

内联 CSS 的缺点

CSS 属性重复
CSS 属性仅限于组件范围，因此可重用性为零
我们将无法充分利用 CSS 的全部功能，例如，没有伪类、伪元素、媒体查询、关键帧动画等。
难以维护或编辑/更新，并且大量内联 CSS 会降低代码的可读性
它会影响性能，每次重新渲染时都会重新计算样式对象

有用的链接：

有关 JSX 的详细信息：

JSX 简介
JSX 深入了解检查此链接以了解最常见的 CSS 属性及其 camelCase 等效项：
CSS 属性参考React Doc 内联样式的参考：
DOM 元素使用 Babel Repl 检查转译后的代码：
巴别塔 (Babel)

结论

我希望本指南有助于您理解带有 React 组件的内联 CSS 的基础知识，并可以作为您旅程的路线图。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

React 中的内联样式

杭州电子商务研究院

5年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

<!DOCTYPE html> <html> <head> <title>Inline CSS</title> </head> <body> <p style="font-size: 20px; color:#4a54f1; text-align:center; padding-top:100px;"> Hello World!!! </p> </body> </html>

import React from 'react'; import ReactDOM from 'react-dom'; function HelloWorld() { const styleObj = { fontSize: 14, color: "#4a54f1", textAlign: "center", paddingTop: "100px", } return( <p style={styleObj}>Hello World!!!</p> ) } /* Instead of creating a separate object, we can write it in this way also: <p style={{ fontSize: 14, color: "#4a54f1", textAlign: "center", paddingTop: "100px" }}>Hello World!!!</p> For better readability, define it separately. */ ReactDOM.render(<HelloWorld />, document.getElementById('app'));

import React from 'react'; import ReactDOM from 'react-dom'; const todoList = [{ title: 'item 1', isDone: false }, { title: 'item 2', isDone: true }] function TodoItem({ title, isDone }) { return ( <div> <p style={{ color: isDone? 'green': 'red' }}>{title}</p> </div> ) } function Todo(props) { const todoList = props.todoList.map(el => <TodoItem key={el.id} title={el.title} isDone={el.isDone} />) return <div>{todoList}</div> } ReactDOM.render(<Todo todoList={todoList} />, document.getElementById('app'));