React入門0x011: 樣式

Pikachu 發布于2019-08-23 11:36 / 1617人閱讀

摘要：當然這個對象的鍵值取值必須在的有效取值范圍內才行，否則，瀏覽器可解析不了。

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

源碼

GPU云服務器云服務器 react _React React 源碼 react cdn

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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