国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

玩轉React樣式

scq000 / 915人閱讀

摘要:里面的元素可以分為兩類,一個是和后面的輸入框,另一類是提交按鈕。就是我們定義的樣式對象。比如,我現在想要定制不同的用戶名密碼輸入框的邊框顏色。根據不同的狀態顯示不同顏色的文本輸入框有兩種狀態,和。方法就會根據不同的狀態返回不同的樣式。

很久很久以前,就有人用CSS來時給HTML內容添加樣式。CSS可以最大限度的分離樣式和內容,選擇器也可以很方便的給某些元素添加樣式。你根本找不到任何不用CSS的理由。

但是在React這里就是另外一回事了,雖然React不是不用CSS。但是,它在給元素添加樣式的時候方式不同。React的核心哲學之一就是讓可視化的組件自包含,并且可復用。這就是為什么HTML元素和Javascript放在一起組成了Component(組件)。

React的自包含組件需要在定義的時候就定義好樣式,這樣才能實現自包含。本文即將帶你學習如何給React的組件添加樣式,當然其中包括如何使用CSS。兩個都會講到,雖然React不鼓勵這樣。

準備工作

要在HTML也中使用React有兩種方法,一個是使用Webpack編譯打包,另一個是使用網頁直接添加React相關js文件。

用webpack來編譯、打包React組件。并在一個index.html的頁面中使用該代碼。具體的準備步驟可以看這里。最后打包到一個叫做bundle.js的文件中。HTML頁面看起來是這樣的:


  
    
    Add style to React
  
  
    
Yo!

也可以在網頁中直接使用React的js代碼。


  
    
    Add style to React
    
    
    
    
    

  
  
    
Yo!

jquery文件可以不用添加,這里用jquery是用來請求服務器的,暫時用不到。

無論使用哪一種方式。最后在頁面中使用的js都是bundle.js。如果用了webpack的方式,那么bundle.js就是由webpack便已打包生成的。如果用的第二種方法,那么bundle.js就是我們自己手動編寫的js代碼。

React生成的HTML元素都會放在這個div里面。

項目結構

使用Webpack的話,項目的整體結果是這樣的:

-webapp
  |--public         // webpack 編譯打包后的js文件所在目錄
       |--css       // css文件所在的目錄
  |--src            // 使用React編寫的代碼所在目錄
  |--index.html     // HTML頁面

如果你使用網頁內部加載React的話,那么就直接在public目錄下創建一個bundle.js文件,并在index.html引用即可。

我們就以一個用戶登錄的界面喂例子。登錄,用戶需呀輸入用戶名、密碼,然后點擊登錄按鈕。

React代碼

我們來看看要實現這個功能React代碼應該什么樣的。

import React from "react";
import {render} from "react-dom";

import LabeledInputText from "./LabeledInputText";
import SubmitButton from "./SubmitButton";

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {un: "", pwd: ""};
        this.handleLogin = this.handleLogin.bind(this);
        this.handleUserNameChanged = this.handleUserNameChanged.bind(this);
        this.handlePasswordChanged = this.handlePasswordChanged.bind(this);
    }

    handleUserNameChanged(un) {
        this.setState({un: un});
    }

    handlePasswordChanged(pwd) {
        this.setState({pwd: pwd});
    }

    handleLogin() {
        // $.ajax({
        //     url: this.props.url,
        //     dataType: "json",
        //     method: "POST",
        //     data: this.state,
        //     cache: false,
        //     success: function(data) {
        //         this.setState({data: data});
        //     }.bind(this),
        //     error: function(xhr, status, err) {
        //         console.error(this.props.url, status, err.toString());
        //     }.bind(this)
        // });

        alert(`${this.state.un}, ${this.state.pwd}`);
    }

    render() {
        var divStyle = {
            color: "blue",
            wdith: "150px",
            paddingTop: "10px",
            display: "inline-block"
        };
        return (
            

Yo, React

); } } render(, document.getElementById("content")); // LabeledInputText import React from "react"; export default class LabeledInputText extends React.Component { constructor(props) { super(props); this.handleTextChange = this.handleTextChange.bind(this); } handleTextChange(e) { if (this.props.labelText.toLowerCase() == "username") { this.props.onUserNameChanged(e.target.value); } else { this.props.onPasswordChanged(e.target.value); } } render() { return (
{`${this.props.labelText} :`}
); } } // SubmitButton import React from "react"; export default class SubmitButton extends React.Component { constructor(props) { super(props); // this.state = {value: ""}; // bind event handler this.handleLogin = this.handleLogin.bind(this); } handleLogin(e) { // this.setState({value: e.target.value}); // alert("hello react"); this.props.onLogin() } render() { return ( ); } }

App類是這個登錄界面的整體。里面的HTML元素可以分為兩類,一個是label和label后面的輸入框,另一類是提交按鈕。

LabeledInputText是label和輸入框的組合。SubmitButton是提交按鈕。

生成出來的HTML頁面是這樣的:


    
    Add style to React
  
  
    

Yo, React

Username :
Password :

在添加樣式之后,效果是這樣的:

使用CSS添加樣式

在React組件上使用CSS樣式比你想的還要簡單。因為最終React還是把組件都轉化成了HTML元素,而你會的各種CSS技巧一樣都可以作用在這些元素上。但是還是有一些小小的地方需要注意:

理解生成的HTML

在使用CSS之前,你需要知道React生成的HTML元素是什么樣子的。看起來很容易理解,因為JSX語法和HTML元素非常接近。

import React from "react";
import {render} from "react-dom";

import LabeledInputText from "./LabeledInputText";
import SubmitButton from "./SubmitButton";

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {un: "", pwd: ""};
    }

    render() {
        var divStyle = {
            color: "blue",
            wdith: "150px",
            paddingTop: "10px",
            display: "inline-block"
        };
        return (
            // 
{/*

Yo, React

*/}
); } } render(, document.getElementById("content"));

render方法里的就是整體的React組件的結構。所有的東西都在一個div里面。LabeledInputText就是一個文字Label和一個input的文本輸入框的組合。SubmitButton是一個可以點擊的按鈕,這里其實是一個含有click事件的div。

全部組件生成HTML之后:

Username :
Password :
Click

里面一些div包含的各種元素,就如前文所說的一樣。另外還有的就是很多的css的class。

React中使用CSS

首先添加css樣式文件:

input:focus{
    outline: none !important;
    border:1px solid red;
    /*box-shadow: 0 0 10px #719ECE;*/
}
.box-group {
    width:230px;
    border: 1px solid blue;
    padding:5px;
    margin: 10px;
}
.form-control {
    padding:5px;
}

.form-under {
    margin-top:10px;
}
.form-button {
    display:block;
    background-color:red;
    text-align: center;
}

上面就是main.css文件包含的全部的樣式。這些樣式主要是給登錄的整個界面元素的邊框設置為藍色,然后在用戶名、密碼和登錄按鈕之間增加間距,最后給按鈕指定背景色為紅色。

接下來需要在React的組件中使用這些樣式。但是直接使用class是不行的。畢竟JSX和HTML元素是有區別的。就以登錄按鈕為例:

{this.props.title}

在React中指定class名稱使用className。React的className最后就會轉化成HTML的class

這個登錄按鈕的樣式有一點復雜:className="form-control form-under form-button"使用了三個不同的css的selector。這些selector的樣式都會應用到這個登錄按鈕上。

用React的方式來添加樣式

React推崇的是內聯的方式定義樣式。這樣做的目的就在于讓你的組件更加的容易復用。和組件相關的全部內容聚合到一起,包括你的組件看起來是什么樣的,是如何工作的。

下面就把之前添加的全部的樣式className都去掉,回到最開始的狀態。

/* index.js */
{/*

Yo, React

*/}
/*LabeledInputText*/
{`${this.props.labelText} :`}
/*SubmitButton*/
{this.props.title}

登錄使用的三個組件的render方法返回的內容的className已經全部都去掉了。

要往React組件內添加一個自定義的樣式對象,這個對象包含的就是css樣式的名稱和樣式的值。只不過樣式的名稱不是css的background-color而是JSX的backgroundColor。例如:

let divStyle = {
    width:"230px",
    border: "1px solid blue",
    padding:"5px",
    margin: "10px"
};

return (
    
{/*

Yo, React

*/}
);

小貼士

在React里注釋不能用HTML的方式,那是木有用的。也不能直接用js的
注釋,那也是不行的。而是用大括號括起來,之后用/**/來注釋。
看起來是這樣的`{/* 這是一個注釋 */}`。

divStyle就是我們定義的樣式對象。要使用這個樣式,只要在React組件中給style賦值。如:style={divStyle}

讓樣式可以自定義

要讓組件的子組件的某些樣式可以自定義很簡單。只需要使用React組件的props。比如,我現在想要定制不同的用戶名、密碼輸入框的邊框顏色。

    
{/*

Yo, React

*/}

之后在LabeledInputText文件中:

styleObj = Object.assign({}, this.pwdStyle, {border: "1px solid " + this.props.bordercolor});

每次需要用到邊框值的時候都從props里面?。?b>this.props.bordercolor。

根據不同的狀態顯示不同顏色

HTML的文本輸入框有兩種狀態,focused和blured。用戶要輸入內容的時候,文本框就在focus的狀態下。用戶的焦點移開,比如開始輸入密碼的時候,用戶名的文本框就在blur狀態下了。

在focus的狀態下的時候,顯示指定顏色的邊框,否則不顯示邊框。這個時候就要用到React的另一個重要概念:State。

首先,給input注冊focus和blur的事件處理方法。



// hanleFocus & handleBlur
handleFocus() {
    this.setState({focused: true});
}

handleBlur() {
    this.setState({focused: false});
}

狀態都存在state里了。然后在input里指定style:style={this.getInputStyles()}。getInputStyles方法就會根據不同的狀態返回不同的樣式。

    getInputStyles() {
        let styleObj;
        if (this.state.focused == true) {
            styleObj = {outlineStyle: "none"};
        }
        return styleObj;
    }

這個方法在focus的時候去除了input默認的效果,blur的時候保持原樣。

最后

隨著React學習的深入,你會發現React添加樣式的方式和之前的方式大有不同。如果你透過上面的例子收入思考的話你會發現,之所以React使用了和以往不同的添加樣式方法是有原因的。HTML、CSS和Javascript這樣的傳統方法在處理網頁的時候是非常有用的,但是在處理React組件組成的復雜的界面的web app的時候卻顯得力不從心。

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

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/111540.html

相關文章

  • 用WijmoJS玩轉您的Web應用 —— React

    摘要:關于作為一款純前端控件集,秉承快如閃電,觸控優先的設計理念,在提供優質服務和產品的同時,專注于企業應用開發,不斷優化產品架構,與時俱進。靈活的為用戶提供易用輕松的操作體驗,全面滿足開發所需,是構建企業應用程序最完整的純前端控件集。 前文回顧 在《用 WijmoJS 玩轉您的Web應用》系列文章中,我們已經介紹了Angular和Vue框架下 WijmoJS 的玩法。 而今天,我們將展示如...

    FleyX 評論0 收藏0
  • 玩轉 React(二)- 新型前端開發方式

    摘要:這也就是所謂的單向數據流,在這種開發方式下,會讓你更新視圖的邏輯非常清晰簡單,哪怕你的前端交互很復雜,也不至于讓你的代碼那么容易變成一坨。就是在前端開發過程中,要善于觀察和抽象。 這是《玩轉 React》系列的第二篇。在該篇中,我們來了解下,React 的出現到底給我們的開發方式帶來了什么樣的變化。 我的感觸可以用一個字來形容,爽!主要爽在以下兩個方面。 視圖是數據的映射(單向數據流)...

    RdouTyping 評論0 收藏0
  • React源碼剖析系列 - 玩轉 React Transition

    摘要:后面將會仔細分析的源碼實現。更新完成后,對中的每個元素執行動畫的邏輯,對中的每個元素執行動畫的邏輯。事實上,原因很簡單,事件在某些情況是不會被觸發??偨Y動畫是組件初次后,才會被添加到的所有子元素上。參考資料官方文檔事件 過去一年,React 給整個前端界帶來了一種新的開發方式,我們拋棄了無所不能的 DOM 操作。對于 React 實現動畫這個命題,DOM 操作已經是一條死路,而 CSS...

    rottengeek 評論0 收藏0
  • 用WijmoJS玩轉您的Web應用 —— Vue.js

    摘要:相反,我們將專注于將添加到用編寫的簡單應用程序中。使用創建應用程序。示例應用程序有兩個組件應用程序和。除在全球率先支持外,現已全面應用于等主流框架中。 showImg(https://segmentfault.com/img/bVbcvaQ?w=500&h=278); 概述 在本文中,我們將展示如何將WijmoJS與NPM和Webpack一起使用來創建最流行的基于JavaScript應...

    OnlyMyRailgun 評論0 收藏0
  • 用WijmoJS玩轉您的Web應用 —— Ionic

    摘要:在之前的文章中,我們已經介紹了使用與三大框架結合搭建您的應用程序。使用創建應用程序。擴展閱讀用玩轉您的應用用玩轉您的應用用玩轉您的應用近期活動問卷調查揚帆萬里,因您前行使用反饋意見征集 前言: 在本文中,我們將著重介紹如何將WijmoJS與Ionic一起使用,來創建一款移動端支持優先、快捷高效的應用程序。在之前的文章中,我們已經介紹了使用WijmoJS與Angular、React、Vu...

    fjcgreat 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<