react之只用classNames避免字串拼接

之前在react當中使用了字串拼接的方式來拼接類名的字串，這種方法不僅不夠方便，還會出現很多問題

使用classnames這個工具，可以省去拼接字串的煩惱，大大提高開發效率

首先，最簡單的使用方法

import classnames from "classnames"

classnames('
foo', '
bar'); //
=> 'foo bar'

複雜的使用

classnames('

foo', '
bar'); //
=> 'foo bar' 
classnames('
foo', ); //
=> 'foo bar' 
classnames(); //
=> 'foo-bar' 
classnames(); //
=> '' 
classnames(, ); //
=> 'foo bar' 
classnames(); //
=> 'foo bar'  //
lots of arguments of various types 
classnames('
foo', , '
baz', ); //
=> 'foo bar baz quux'  //
other falsy values are just ignored 
classnames(null, false, '
bar', undefined, 0, 1, , ''); //
=> 'bar 1'

同時還可以和es6的模板字串使用更加簡單

let fastyle = "home";

classnames("fa",`fa-$`) // => "fa fa-home"

React初探之React特性

一 宣告式開發 與原生dom jquery等命令式程式設計不同 不通過指令來控制檢視變化，是面向資料的程式設計 通過控制資料，改動資料的方式控制檢視的變化，dom的部分react會幫你自動構建 二 可以與其他框架並存 reactdom.render document.getelementbyid r...

學習筆記之React

virtual dom 虛擬dom 傳統的web應用，操作dom一般是直接更新操作的，但是我們知道dom更新通常是比較昂貴的。而react為了盡可能減少對dom的操作，提供了一種不同的而又強大的方式來更新dom，代替直接的dom操作。就是virtual dom,乙個輕量級的虛擬的dom，就是reac...

React之教程總結

前言 前段時間學習了react，主要的學習資料是乙個不錯的 教程，學習的過程基本都是按部就班的學的。在學react之前，我是有jquery的基礎的，之前也簡單的了解過vue，知道類似vue這類框架和jquery是有很大的不同的。在以前，基本都是html css js 或jquery 而在vue re...