React中使用样式的四种方式 模块化样式 classNames css-in-js

前言

React 使用 JSX 来替代常规的 JavaScript。

  • JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
  • JSX 运用于 React 架构中,其格式比较像是模版语言,但事实上完全是在 JavaScript 内部实现的。
  • 元素是构成 React 应用的最小单位,JSX 就是用来声明 React 当中的元素,React 使用 JSX 来描述用户界面。
  • 与浏览器的 DOM 元素不同,React 当中的元素事实上是普通的对象,React DOM 可以确保浏览器 DOM 的数据内容与 React 元素保持一致。
  • 要将 React 元素渲染到根 DOM 节点中,我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上。
  • JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化,使用 JSX 编写模板更加简单快速。

有关JSX的资料请参考:
https://baike.baidu.com/item/JSX/1686693?fr=aladdin
https://react.docschina.org/docs/introducing-jsx.html

React中样式的使用方式有以下几种:

  • 行内样式和类样式
  • 模块化样式
  • 动态切换样式
  • CSS-in-JS

1. 行内样式和类样式

  • 使用行内样式时,属性 style={} 里面要传一个对象。可以直接写入一个对象,也可以写入一个已经声明好的对象。
  • 使用样式文件时,用 import 导入样式文件,在标签上添加 className 属性,由于 JSX 就是 JavaScript,class 需要写成 className ,class 是 JavaScript 的保留字。
  • 从性能角度来说,CSS 的 class 通常比行内样式更好。
import React, { Component } from 'react';
import "./common.css";

class Box extends Component {
  constructor(){
    super();
    this.state ={
      styleObj:{
        fontSize:'50px'
      }
    }
  }
  render() {
    return (
      // 使用class,container是在common.css中声明的一个样式
      <div className="container">
        {/* 行内样式 */}
        <h1 style={{'fontSize':'20px'}}>标题1</h1>
        <h1 style={this.state.styleObj}>标题2</h1>
      </div>
    );
  }
}
export default Box;

2. 模块化样式

新建后缀名为.module.css的样式文件,例如新建common.module.css的样式文件内容如下:

.success{color:green;font-size:20px;}
.error{color:red;font-size:20px;}

使用的时候,通过 import 导入样式文件,通过文件名[属性]来使用这个样式。

import React, { Component } from 'react';
import common from "./common.module.css"

class Box extends Component {
  render() {
    return (
      <div>
        <span className={common.error}>异常信息</span>
      </div>
    );
  }
}

export default Box;

3. 动态切换样式

通过 classNames 插件来完成,根据不同的条件判断,应用不同的样式。

在终端执行下面的命令,安装 classNames
yarn add classnames -S

使用的时候:
1、通过 import 先导入classNames 插件;
2、使用 classNames.bind() 方法建立绑定关系;
3、声明样式对象,属性名为样式名称,值为boolean,true表示应该该样式;false表示不应用该样式;
4、在标签上添加 className 属性,值为该样式对象;

具体使用方式如下:

/* common.css 文件内容 */
.success{color:green;font-size:20px;}
.error{color:red;font-size:20px;}

react 代码:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import classNames from 'classnames/bind';
import styles from './common.css'

let cx = classNames.bind(styles); //建立绑定关系

class Box extends Component {
  render() {
    let names = cx({	//声明样式对象
      success:true,
      error:this.props.error	//从标签属性中读取传过来的值
    })
    return (
      <div>
        <h1 className={names}>这是提示信息</h1>
      </div>
    );
  }
}

ReactDOM.render(
  <Box  error={false} />,
  document.getElementById('root')
);

使用这种方式的好处就是可以动态切换DOM元素中应用的样式。

4. CSS-in-JS

在 react 里一切皆组件,所以能不能把 clss 也定义成组件模块呢?当然是可以的。styled-components是针对 React 写的一套 css-in-js 框架,简单来讲就是可以在 js 中写 css。

“CSS-in-JS” 是指一种模式,其中 CSS 由 JavaScript 生成而不是在外部文件中定义。

注意此功能并不是 React 的一部分,而是由第三方库提供。 React 对样式如何定义并没有明确态度;如果存在疑惑,比较好的方式是和平时一样,在一个单独的 *.css 文件定义你的样式,并且通过 className 指定它们。

我们来看如何使用 styled-components 插件。

在终端中执行下面的命令,安装 styled-components 插件
yarn add styled-components -S

新建一个样式文件,注意这个样式文件的后缀是 .js
1、通过 import 导入 styled-components;
2、使用 styled 定义样式内容,可以通过属性传参,也可以使用 sass 语法;

//common.js 样式文件
import styled from 'styled-components'

//这种定义的写法类似于 
const Container = styled.div` width:500px; height:500px; background:${(props)=>props.color}; font-size:30px; h1 { font-size:50px; } ` export { Container }

在react中使用的时候:

import React, { Component } from 'react';
import {Container} from './common'

class Box extends Component {
  render() {
    return (
      <Container color="red">
        <h1> hello world</h1>
        这里是内容
      </Container>
    );
  }
}

ReactDOM.render(
    <Box />,
  document.getElementById('root')
);

最终渲染到页面的结果如下:
React中使用样式的四种方式 模块化样式 classNames css-in-js_第1张图片
这种方式的优点是可以动态传递参数。

总结

  • 行内样式和类样式,通常不推荐将 style 属性作为设置元素样式的主要方式。在多数情况下,应使用 className 属性来引用外部 CSS 样式表中定义的 class。style 在 React 应用中多用于在渲染过程中添加动态计算的样式。
  • 模块化样式,样式文件的后缀为.module.css,使用的时候以对象的形式来调用样式。
  • 动态切换样式,通过 classNames 插件来完成,通过对样式属性设置 true 或者 false,来设置是否将该样式应用到DOM对象中。
  • CSS-in-JS,在js文件中写css,样式文件的后缀名为 .js,这种方式最大的优点就是可以传递参数。

你可能感兴趣的:(react,react)