React入门0x011: 样式

Pikachu 发布于2019-08-23 11:36 / 1452人阅读

摘要：当然这个对象的键值取值必须在的有效取值范围内才行，否则，浏览器可解析不了。

0x000 概述

这一章讲react中的样式

0x001 样式也可以是js

再声明一遍，在js中，什么都是js，样式也是，但是样式分为两种，内联样式和外联样式

内联样式：

内联样式可以写在标签的style属性中

我们先尝试传统写法

import React from "react"
import ReactDom from "react-dom"

class App extends React.Component {
    render() {
        return 
            hello react
        
    }
}

ReactDom.render(
    ,
    document.getElementById("app")
)

查看浏览器，会发现报错，因为style期待的是一个像{background:"red"}一样键值对对象

修改写法：

import React from "react"
import ReactDom from "react-dom"

class App extends React.Component {
    render() {
        return 
            hello react
        
    }
}

ReactDom.render(
    ,
    document.getElementById("app")
)

查看浏览器，可以了

那为什么要两个{}呢？其实不是两个大括弧，第一个大括弧代表这里边执行js表达式，第二个括弧则代表对象，我们换一种写法就会更清晰一点了

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            background: "red"
        }
    }

    render() {
        return 
            hello react
        
    }
}

甚至还可以：

class App extends React.Component {
    constructor() {
        super()
    }
    createStyle(){
        return{
            background: "red"
        }
    }

    render() {
        return 
            hello react
        
    }
}

ReactDom.render(
    ,
    document.getElementById("app")
)

记住咯，在react中，什么都可以是js，对于style，我们只需要返回一个对象就行了，不论是直接返回一个对象，还是通过复杂的函数创建对象，或者是其他野路子，只要给style一个对象就好了。当然这个对象的键值取值必须在css的有效取值范围内才行，否则，浏览器可解析不了。

外链样式文件

外联样式文件可以将样式存储在独立的文件中

编写样式文件

// style.css
div {
    background: red;
}

编写组件

// index.js
import React from "react"
import ReactDom from "react-dom"
import "./style.css"
class App extends React.Component {
    constructor() {
        super()
    }

    render() {
        return 
            hello react
        
    }
}

ReactDom.render(
    ,
    document.getElementById("app")
)

添加对css的支持

$ npm install --save-dev css-loader style-loader
$ vim webpack.config.js

const path = require("path")
 var HtmlWebpackPlugin = require("html-webpack-plugin");
 
 module.exports = {
     entry: path.resolve(__dirname, "src/index.js"),
     mode: "development",
     output: {
         path: path.resolve(__dirname, "dist"),
         filename: "bundle.js"
     },
     devServer: {
         open: true
     },
     module: {
         rules: [
             {
                 test: /.js$/,
                 loader: "babel-loader"
             },
             {
                 test: /.css$/,
                 loaders: [
                     "style-loader",
                     "css-loader"
                 ]
             }
         ]
     },
     plugins: [
         new HtmlWebpackPlugin({
             template: path.resolve(__dirname, "src/index.html")
         })
     ]
 }

说明：外联样式的能力不是react提供的，而是webpack，webpack可以将style.css插入到文件中，从而渲染到react最后生成的dom上，可以查看浏览器：

0x003 总结

react中都是js，样式也是js，所以react中，样式也可以编程的，可以完全动态的方式生成样式，当然还是那句话：不受控制的自由将带来灾难，思想的自由才能铸就自我。

0x004 资源

react

源码

云服务器服务器托管 react _React React 源码 react cdn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97204.html

es6基础0x011：Set

摘要：概述是一个新的数据结构，和其他语言的特性差不多，当然，作为中的，他还是有一些属于的特点。 0x000 概述 Set是一个新的数据结构，和其他语言的特性差不多，当然，作为js中的Set，他还是有一些属于js的特点。 0x001 初始化 new Set([iterable]); 初始化一个Set有一个可选的参数，这个参数必须是一个可迭代的对象，可迭代对象包括String、Array、Arr...

jsyzchen 2019-08-23 13:09 评论0 收藏0
React 组件开发入门

摘要：实现中间圆心基本样式容器元件样式圆心样式生成动画元件元件个数，定制个数元件元素集合生成组件自己的样式模拟渲染基本动画元件的，控制交互最后，下面是基本的不考虑不支持的情况，不支持都不用开发，直接用图，性价比更高里面用到的一个混淆方法前言熟悉 React 的思想后，我们先来尝试开发一个单纯的小组件，可以对比一下是不是比以前的开发模式更加舒适了，这里我主要以一个 Loadding 组件来...

imccl 2019-08-19 17:06 评论0 收藏0
《慕课React入门》总结

摘要：入门与实战组件虚拟的概念这是性能高效的核心算法为此引入了虚拟的机制。这个过程是自动完成的。实际上是改变了样式文件中类的名称，使其唯一。如果希望使用达到的效果，则需要做件事情服务器支持。 React 入门与实战 react组件虚拟DOM的概念这是React性能高效的核心算法 React为此引入了虚拟DOM（Virtual DOM）的机制。基于React进行开发时所有的DOM构造都是通...

NotFound 2019-08-21 17:01 评论0 收藏0
《慕课React入门》总结

摘要：入门与实战组件虚拟的概念这是性能高效的核心算法为此引入了虚拟的机制。这个过程是自动完成的。实际上是改变了样式文件中类的名称，使其唯一。如果希望使用达到的效果，则需要做件事情服务器支持。 React 入门与实战 react组件虚拟DOM的概念这是React性能高效的核心算法 React为此引入了虚拟DOM（Virtual DOM）的机制。基于React进行开发时所有的DOM构造都是通...

zhigoo 2019-08-30 15:53 评论0 收藏0
React入门之脚手架搭建项目

摘要：前言写此系列博客的目的是对所学知识点的总结和梳理，包括填坑方案分享，希望能帮助到还并不会使用的开发者入门官方文档中文文档社区项目搭建按照官方提供的搭建项目全局安装或全局安装后可以使用这条命令创建名为的项目启动前言写此系列博客的目的是对所学React知识点的总结和梳理，包括填坑方案分享，希望能帮助到还并不会使用React的开发者入门React React官方文档React中文文档R...

BingqiChen 2019-08-23 13:39 评论0 收藏0