成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

React入門(mén)0x011: 樣式

Pikachu / 1623人閱讀

摘要：當(dāng)然這個(gè)對(duì)象的鍵值取值必須在的有效取值范圍內(nèi)才行，否則，瀏覽器可解析不了。

0x000 概述

這一章講react中的樣式

0x001 樣式也可以是js

再聲明一遍，在js中，什么都是js，樣式也是，但是樣式分為兩種，內(nèi)聯(lián)樣式和外聯(lián)樣式

內(nèi)聯(lián)樣式：

內(nèi)聯(lián)樣式可以寫(xiě)在標(biāo)簽的style屬性中

我們先嘗試傳統(tǒng)寫(xiě)法

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

class App extends React.Component {
    render() {
        return 

            
hello react

        

    }
}

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

查看瀏覽器，會(huì)發(fā)現(xiàn)報(bào)錯(cuò)，因?yàn)?b>style期待的是一個(gè)像{background:"red"}一樣鍵值對(duì)對(duì)象


修改寫(xiě)法：

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

class App extends React.Component {
    render() {
        return 

            
hello react

        

    }
}

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

查看瀏覽器，可以了

那為什么要兩個(gè){}呢？其實(shí)不是兩個(gè)大括弧，第一個(gè)大括弧代表這里邊執(zhí)行js表達(dá)式，第二個(gè)括弧則代表對(duì)象，我們換一種寫(xiě)法就會(huì)更清晰一點(diǎn)了

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，對(duì)于style，我們只需要返回一個(gè)對(duì)象就行了，不論是直接返回一個(gè)對(duì)象，還是通過(guò)復(fù)雜的函數(shù)創(chuàng)建對(duì)象，或者是其他野路子，只要給style一個(gè)對(duì)象就好了。當(dāng)然這個(gè)對(duì)象的鍵值取值必須在css的有效取值范圍內(nèi)才行，否則，瀏覽器可解析不了。

外鏈樣式文件

外聯(lián)樣式文件可以將樣式存儲(chǔ)在獨(dú)立的文件中

編寫(xiě)樣式文件

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

編寫(xiě)組件

// 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")
)

添加對(duì)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")
         })
     ]
 }

說(shuō)明：外聯(lián)樣式的能力不是react提供的，而是webpack，webpack可以將style.css插入到文件中，從而渲染到react最后生成的dom上，可以查看瀏覽器：

0x003 總結(jié)

react中都是js，樣式也是js，所以react中，樣式也可以編程的，可以完全動(dòng)態(tài)的方式生成樣式，當(dāng)然還是那句話：不受控制的自由將帶來(lái)災(zāi)難，思想的自由才能鑄就自我。

0x004 資源

react

源碼

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/97204.html

相關(guān)文章

  • es6基礎(chǔ)0x011：Set

    摘要：概述是一個(gè)新的數(shù)據(jù)結(jié)構(gòu)，和其他語(yǔ)言的特性差不多，當(dāng)然，作為中的，他還是有一些屬于的特點(diǎn)。 0x000 概述 Set是一個(gè)新的數(shù)據(jù)結(jié)構(gòu)，和其他語(yǔ)言的特性差不多，當(dāng)然，作為js中的Set，他還是有一些屬于js的特點(diǎn)。 0x001 初始化 new Set([iterable]); 初始化一個(gè)Set有一個(gè)可選的參數(shù)，這個(gè)參數(shù)必須是一個(gè)可迭代的對(duì)象，可迭代對(duì)象包括String、Array、Arr...

    jsyzchen 評(píng)論0 收藏0

  • React 組件開(kāi)發(fā)入門(mén)

    摘要：實(shí)現(xiàn)中間圓心基本樣式容器元件樣式圓心樣式生成動(dòng)畫(huà)元件元件個(gè)數(shù)，定制個(gè)數(shù)元件元素集合生成組件自己的樣式模擬渲染基本動(dòng)畫(huà)元件的，控制交互最后，下面是基本的不考慮不支持的情況，不支持都不用開(kāi)發(fā)，直接用圖，性價(jià)比更高里面用到的一個(gè)混淆方法 前言 熟悉 React 的思想后，我們先來(lái)嘗試開(kāi)發(fā)一個(gè)單純的小組件，可以對(duì)比一下是不是比以前的開(kāi)發(fā)模式更加舒適了，這里我主要以一個(gè) Loadding 組件來(lái)...

    imccl 評(píng)論0 收藏0

  • 《慕課React入門(mén)》總結(jié)

    摘要：入門(mén)與實(shí)戰(zhàn)組件虛擬的概念這是性能高效的核心算法為此引入了虛擬的機(jī)制。這個(gè)過(guò)程是自動(dòng)完成的。實(shí)際上是改變了樣式文件中類的名稱，使其唯一。如果希望使用達(dá)到的效果，則需要做件事情服務(wù)器支持。 React 入門(mén)與實(shí)戰(zhàn) react組件 虛擬DOM的概念 這是React性能高效的核心算法 React為此引入了虛擬DOM（Virtual DOM）的機(jī)制。基于React進(jìn)行開(kāi)發(fā)時(shí)所有的DOM構(gòu)造都是通...

    NotFound 評(píng)論0 收藏0

  • 《慕課React入門(mén)》總結(jié)

    摘要：入門(mén)與實(shí)戰(zhàn)組件虛擬的概念這是性能高效的核心算法為此引入了虛擬的機(jī)制。這個(gè)過(guò)程是自動(dòng)完成的。實(shí)際上是改變了樣式文件中類的名稱，使其唯一。如果希望使用達(dá)到的效果，則需要做件事情服務(wù)器支持。 React 入門(mén)與實(shí)戰(zhàn) react組件 虛擬DOM的概念 這是React性能高效的核心算法 React為此引入了虛擬DOM（Virtual DOM）的機(jī)制?；赗eact進(jìn)行開(kāi)發(fā)時(shí)所有的DOM構(gòu)造都是通...

    zhigoo 評(píng)論0 收藏0

  • React入門(mén)之腳手架搭建項(xiàng)目

    摘要：前言寫(xiě)此系列博客的目的是對(duì)所學(xué)知識(shí)點(diǎn)的總結(jié)和梳理，包括填坑方案分享，希望能幫助到還并不會(huì)使用的開(kāi)發(fā)者入門(mén)官方文檔中文文檔社區(qū)項(xiàng)目搭建按照官方提供的搭建項(xiàng)目全局安裝或全局安裝后可以使用這條命令創(chuàng)建名為的項(xiàng)目啟動(dòng) 前言 寫(xiě)此系列博客的目的是對(duì)所學(xué)React知識(shí)點(diǎn)的總結(jié)和梳理，包括填坑方案分享，希望能幫助到還并不會(huì)使用React的開(kāi)發(fā)者入門(mén)React React官方文檔React中文文檔R...

    BingqiChen 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<