React动态改变class来切换样式

React动态改变class来切换样式

React有个库的名字叫classnames可以用来动态控制JS中class的逻辑，并且可以绑定写好的样式，以配合CSS的Hash

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import style from "./RightBar.scss"; //加载写好的样式
import Classbind from "classnames/bind //加载Classname的绑定

let classNames = Classbind.bind(style);//对写好的样式进行绑定

class RightBar extends React.Component {

    render() {
        //写好class的集合和控制逻辑
        let clazz = classNames({
            root: true,
            active: this.props.active
        });

        //使用class的集合clazz
        return (
            <div className={clazz}>
                {this.props.children}
            </div>
        )
    }
}

如果觉得这样太麻烦可以简单点写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import classnames from "classnames/bind";
import style from "./Content.scss";

class Content extends React.Component {

    render() {
        //直接调用绑定省区临时变量
        let clazz = classnames.bind(style)({
            root: true,
            extend: this.props.extend,
        });
        //载入class的集合clazz
        return (
            <div className={clazz}>
                {this.props.children}
            </div>
        )
    }
}

展开全文 >>

Redux对内部Class进行Connect

Connect需要调用在作用域内

与文章ES6文内件多个Clss时WebStorm不能自动补全中提到的作用域错误时无法自动补全但是不会报错不同，在使用Redux的Connect时，如果使用错了作用域会直接报错

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

//在Header之前，可以被自动补全
class UserBox extends Component {...}

//在Header之前，可以被自动补全，Connect在UserBox之后，可以有效Connect
const ConnectedUserBox = connect(() => ({}), {switchRightBar})(UserBox);

class Header extends Component {
    render() {
        return (
            <div>
                <UserBox />             <==可以自动补全
                <ConnectedUserBox />    <==可以自动补全
                {<TitleBox />}          <==不能正常自动补全，但是不会报错
                {<ConnectedTitleBox />} <==不能正常自动补全，并且会在运行后会报错
            </div>
        )
    }
}

//在Header之后，不可以自动补全，调用Connect调用时TitleBox还没声明，不能正常使用ConnectedTitleBox
const ConnectedTitleBox = connect(() => ({}), {switchSideBar})(TitleBox);

//在Header之后，不可以自动补全
class TitleBox extends Component {...}

展开全文 >>

动态传入Class创建子Component

动态传入Class创建子Component

需求是不同的Menu标题要有不同的Icon图标

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
import FaEye from "react-icons/fa/eye";
import FaLapTop from "react-icons/fa/laptop";
import FaBook from "react-icons/fa/book";
import FaCogs from "react-icons/fa/cogs";

//把从React Icon导入的Component作为data里的"icon"变量导入
const datas = [
    {"title": "首页", "icon": FaEye},
    {"title": "漏洞", "icon": FaLapTop},
    {"title": "用户", "icon": FaBook},
    {"title": "平台", "icon": FaCogs},
];

//通过map循环创建menus
class SideBar extends Component {

    render() {

        let menus = datas.map((data) => <Menu data={data} key={data.title}/>);

        return (
            <div>
                <ul>
                    {menus}
                </ul>
            </div>
        );
    }
}

//通过Menu里动态创建子Component
class Menu extends Component {

    render() {
        return (
            <li>
                <a>
                    {React.createElement(this.props.data.icon)}
                    <span>{this.props.data.title}</span>
                </a>
            </li>
        )
    }
}

用到的知识点

  1. JSX中使用大括号转入JavaScript解析
  2. 使用了React的createElement方法动态创建JSX的Element，让子Component生效

展开全文 >>

ES6文内件多个Clss时WebStorm不能自动补全

一个文件多个Class

在写JSX的时候经常会有这个需求，一个Component中有多个子Component都写在一个文件里

虽然有时候页面可以正常运行，但是 WebStorm却不会对其自动补全

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import FaBars from "react-icons/fa/bars";

class Header extends Component {
    render() {
        return (
            <div className={style.root}>
                <FaBars />              <==此处可以进行自动补全
                <TitleBox />            <==此处不会自动补全
                <UserBox />             <==此处不会自动补全
            </div>
        )
    }
}

class TitleBox extends Component {...}

class UserBox extends Component {...}

搞得我很困惑，为了让其能自动补全，我发现可以通过大括号强行让其按JavaScript解析而不是JSX

1
2
3
4
5
6
7
8
9
10
11
12
//妥协的解决方案
class Header extends Component {
    render() {
        return (
            <div className={style.root}>
                <FaBars />              <==此处可以进行自动补全
                {<TitleBox />}          <==使用大括号进入JS作用域
                {<UserBox />}           <==可以完成正常的自动补全
            </div>
        )
    }
}

正确的解决方案

后来满满了解了ES6之后，才发现是变量作用域的问题啊。。。。class是个变量，需要声明后才能被WebStorm自动补全

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import FaBars from "react-icons/fa/bars";

class TitleBox extends Component {...}

class Header extends Component {
    render() {
        return (
            <div className={style.root}>
                <FaBars />              <==因为import的FaBars在class Header以上
                <TitleBox />            <==此处可以进行自动补全同FaBars
                {<UserBox />}           <==此处还是不会自动补全
            </div>
        )
    }
}

class UserBox extends Component {...}

问题的核心分析

其实在写代码中不管怎么写都可以运行，但是这里牵扯到了两个知识点值得注意

  1. 一个文件多个class虽然是没有作用域的，但是如果相对class执行函数则是有的，参考文章Redux进行多个Connect
  2. WebStorm进行分析的时候采用了作用域的分析，仅仅是这个IDE的代码分析逻辑的问题
  3. 妥协的解决方式，其实是在JSX中采用大括号强行转入JS代码，就如同{style.root}一样

展开全文 >>

ES6使用目录路径import

ES6使用目录路径import

除了对具体文件进行导出外，还可以对文件夹进行导出，但是需要index文件，存在目录

1
2
3
--component
  --file.jsx
  --index.jsx

其中index文件中写入

1
2
//index.jsx
export Custom from "./file.jsx";

就可以在其它文件中，直接对component文件夹进行导入

1
2
//此处component是个文件夹，会自动读取index文件
import {Custom} from "../../component"

展开全文 >>

ES6的Object的is和assign用法

对象的扩展

在ES6中有两个Object的扩展用法

Object.is()

用于判断两个对象是否相等，ES6提出“Same-value equality”（同值相等）算法，用来解决这个问题。Object.is就是部署这个算法的新方法。它用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致

1
2
3
Object.is('foo', 'foo') // true
Object.is({}, {}) // false

Object.assign()

用于合并对象，当做对数据的更新逻辑时，功能类似于Java里的Dozer库

1
2
3
4
5
6
7
8
var target = { a: 1 };

var source1 = { b: 2 };
var source2 = { c: 3 };

Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

该方法有个特性，如果目标对象与源对象有同名属性，或多个源对象有同名属性，则后面的属性会覆盖前面的属性，那么我们就可以用来对对象做更新操作

1
2
3
4
5
var source = {key:"1"}
var update = {key:"10"}

source  = Object.assign({},source,update)
console.log(source) //{key:"10"}

这里我们把target设定成一个空对象，在完成了assgin之后返回target，由于需要update的信息在source之后，所以update的数据覆盖了元数据，又将source对象重新指向返回的target完成更新

展开全文 >>

React简要必备知识点

React入门

React的入门文章一大堆,我也就不絮絮叨叨的讲了，请参考阮一峰React系列的文章 本文只对一些教程中没有提到的，忽略了初学者的困惑的技术点进行补充。

正确理解JSX

在React的文件里，编程时可能会出现3种样式的语言，但是这3种样式都属于JavaScript分别是

语言样式 代表词 解释
CommonJS require、ReactDOM.render、React.createClass 这个是node默认支持的JS的写法
ES6 import、export、extends 这是ECMAScript 6的简称，是JavaScript写法的一个变种，类似CoffeeScript
JSX 在render的返回值里 JSX是Facebook为了React提出一种解析语言，仅仅在render的返回值里 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//CommonJS
var component = React.createClass({
  render: function() {
    return (
      <p>这是CommonJS的写法</p>
    )
  }
});

//ES6
class component extends React.Component {
  render() {
    return (
      <p>这是ECMAScript 6的写法</p>
      )
  }
}

不管使用哪种写法，在render里的 return()内部才是JSX的部分 一种看上去像HTML实际是JavaScript的语言格式，

如果想在JSX内部嵌套使用JavaScript的变量，需要加入大括号

1
2
3
return (
  <p>外部是JSX{大括号内部才是正常的JavaScript}外部是JSX</p>
  )

ES常用知识点

详细的ES教程请参考阮一峰的ES6教程

ES6的变量作用域

ES6中变量定义有3种方式var、const、let，其中let存在严格的作用域概念，必须先声明后使用，而const和var则和传统JavaScript的一样，由此引发了很多疑问

  1. 同一文件中Class嵌套WebStorm自动补全失效
  2. Redux在文件中Connect多个class时注意作用域

ES6的解构赋值

ES6存在一种赋值方法叫解构赋值

1
2
3
4
5
6
7
8

var name = "Li"
var number = "001"

{name, number} = student //进行解构赋值

console.log(student.name)// "Li"
console.log(student.number)// "001"

ES6的import/export

ES6中对模块的链接使用的是import和export关键词，类似于其它语言中的include和import一样，但是稍微有些不同的是，ES6可以export多个文件

1
2
3
4
5
6
//file.jsx
export default ...

export value1
export value2

当我使用import加载上述文件的时候

1
2
import custom from "file.jsx" //使用custom作为名字加载default的export
import {value1,value2} from "file.jsx"//加载value1和value2两个export

参考文章对目录进行import可以直接从目录导入

ES6的Arrow Function

ES6中有一个常用的语法糖叫做 Arrow Function

1
const example = param => value

这句话准确的描述是: 定义了一个example的const变量，变量指向一个匿名方法的方法，方法带有一个参数param，方法内部直接返回value 用传统的JS来写就是

1
2
3
4
5
6
var example = funcation(param) {
  return value;
}

console.log(example)// 打印方法 "funcation(param) {return value}"
console.log(example())// 打印方法执行结果 "value"

除了以上之外箭头函数还可以使用小括号来包裹多个参数，和大括号执行多条语句而不是直接返回

1
2
3
4
const example = （param1，param2） => {
    console.log("执行第一条语句")
    cnnsole.log("执行第二条语句")
}

从上文可以看出，大括号是可以不进行return的，小括号还可以用来包裹直接返回的Object对象，例如以下两种是等价的

1
2
3
4
5
6
7
//使用小括号直接返回对象
const example1 = (param1,param2) => ({key:"value"})

//使用语句手动返回对象
const example2 = (param1,param2) => {
  return {key:"value"}
}

展开全文 >>

CSS大于号选择第一级子元素

element >

在CSS中大于号表示为子选择器(Child Selector) 而两个元素并列 div p 对应于JQuery中的Children()方法，只会返回第一级子元素

1
2
3
4
5
6
7
8
<body>
    <div id="one">
        <div id="three">
        </div>
    </div>
    <div id="two">
    </div>
</body>

如果我采用

1
body div:first-child

来选取会得到 one 和 three 虽然first-child限定了div必须为第一个子元素，但是three本身不仅为one的子元素，也是body的子元素，只是不是第一级

甚至采用

1
body div:nth-child(1)

也是仅仅限制了第一个子元素，而不是第一级的第一个子元素

所以应该采用

1
body >div:first-child

才能正确选择到one，使用大于号限定在body下的 第一级子元素中选择第一个子元素

展开全文 >>

NTH选择器选择单双行

通过nth-of-type选择单双行

其中odd意思是奇数，even意思是偶数

1
2
3
4
5
6
7
8
9
10
p:nth-of-type(odd)
{
background:#ff0000;
}

p:nth-of-type(even)
{
background:#0000ff;
}

CSS3的nth选择器

上述用到的是CSS3里的nth选择，其一共分为四个，而nth代表什么意思。。。我没有查到。。fuck。。。

选择器 示例 解释
:nth-child(n) p:nth-child(2) 选择每个p元素是其父级的第二个子元素
:nth-last-child(n) p:nth-last-child(2) 选择每个p元素的是其父级的第二个子元素，从最后一个向前计数
:nth-of-type(n) p:nth-of-type(2) 选择每个p元素是其父级的第二个p元素
:nth-last-of-type(n) p:nth-last-of-type(2) 选择每个p元素的是其父级的第二个p元素，从最后一个向前计数

可以看出 除了last这个关键字可以改变计数方向以外 还有 child 和 type 两种选择方式

child和type的区别

通过百度我们得知

  1. ele:nth-child(n)是指父元素下第n个元素且这个元素为ele，若不是，则选择失败
  2. ele:nth-of-type(n)是指父元素下第n个ele元素
1
2
3
4
5
6
7
<div>
  <ul>
      <p>aaaa</p>
      <li>bbbb</li>
      <li>cccc</li>
  </ul>
</div>
  1. ul li:nth-child(2) : 选择的是
  2. aaaa
    3. 节点
  3. ul li:nth-of-type(2): 选择的是
  4. bbbb
    5. 节点

通过ab+b选择

nth选择器除了使用数字之外，还可以使用循环公式 an+b ,例如

1
ele:nth-child(3n+4) 会去匹配第 4, 7, 10, 13 个元素

展开全文 >>

Nginx和Jetty在开机自启动

开机自启动

参考文章Linux开机自启动的脚本，我们需要准备可以用的Nginx和Jetty脚本

Nginx的脚本

Nginx的脚本可以从Nginx官网推荐脚本下载到,下好后需要更改两处

1
2
3
4
5
//指定本机的Nginx的Home路径
nginx="/usr/local/nginx/sbin/nginx"

//指定本机的Nginx配置文件
NGINX_CONF_FILE="/usr/local/nginx/conf/nginx.conf"

Jetty的脚本

Jetty的脚本可以去Jetty服务器的bin目录下拷贝 jetty.sh 脚本，然后在其中添加

1
JETTY_HOME="/usr/local/jetty/"

来指定本机的Jetty的Home路径

Nginx脚本附件

修改后的官网脚本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
#!/bin/sh
#
# https://www.nginx.com/resources/wiki/start/topics/examples/redhatnginxinit/
# nginx - this script starts and stops the nginx daemon
#
# chkconfig:   - 85 15
# description:  NGINX is an HTTP(S) server, HTTP(S) reverse \
#               proxy and IMAP/POP3 proxy server
# processname: nginx
# config:      /etc/nginx/nginx.conf
# config:      /etc/sysconfig/nginx
# pidfile:     /var/run/nginx.pid

# Source function library.
. /etc/rc.d/init.d/functions

# Source networking configuration.
. /etc/sysconfig/network

# Check that networking is up.
[ "$NETWORKING" = "no" ] && exit 0

nginx="/usr/local/nginx/sbin/nginx"
prog=$(basename $nginx)

NGINX_CONF_FILE="/usr/local/nginx/conf/nginx.conf"

[ -f /etc/sysconfig/nginx ] && . /etc/sysconfig/nginx

lockfile=/var/lock/subsys/nginx

make_dirs() {
   # make required directories
   user=`$nginx -V 2>&1 | grep "configure arguments:.*--user=" | sed 's/[^*]*--user=\([^ ]*\).*/\1/g' -`
   if [ -n "$user" ]; then
      if [ -z "`grep $user /etc/passwd`" ]; then
         useradd -M -s /bin/nologin $user
      fi
      options=`$nginx -V 2>&1 | grep 'configure arguments:'`
      for opt in $options; do
          if [ `echo $opt | grep '.*-temp-path'` ]; then
              value=`echo $opt | cut -d "=" -f 2`
              if [ ! -d "$value" ]; then
                  # echo "creating" $value
                  mkdir -p $value && chown -R $user $value
              fi
          fi
       done
    fi
}

start() {
    [ -x $nginx ] || exit 5
    [ -f $NGINX_CONF_FILE ] || exit 6
    make_dirs
    echo -n $"Starting $prog: "
    daemon $nginx -c $NGINX_CONF_FILE
    retval=$?
    echo
    [ $retval -eq 0 ] && touch $lockfile
    return $retval
}

stop() {
    echo -n $"Stopping $prog: "
    killproc $prog -QUIT
    retval=$?
    echo
    [ $retval -eq 0 ] && rm -f $lockfile
    return $retval
}

restart() {
    configtest || return $?
    stop
    sleep 1
    start
}

reload() {
    configtest || return $?
    echo -n $"Reloading $prog: "
    killproc $nginx -HUP
    RETVAL=$?
    echo
}

force_reload() {
    restart
}

configtest() {
  $nginx -t -c $NGINX_CONF_FILE
}

rh_status() {
    status $prog
}

rh_status_q() {
    rh_status >/dev/null 2>&1
}

case "$1" in
    start)
        rh_status_q && exit 0
        $1
        ;;
    stop)
        rh_status_q || exit 0
        $1
        ;;
    restart|configtest)
        $1
        ;;
    reload)
        rh_status_q || exit 7
        $1
        ;;
    force-reload)
        force_reload
        ;;
    status)
        rh_status
        ;;
    condrestart|try-restart)
        rh_status_q || exit 0
            ;;
    *)
        echo $"Usage: $0 {start|stop|status|restart|condrestart|try-restart|reload|force-reload|configtest}"
        exit 2
esac

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

我写的，大概率是错的。。。。。