React入门（二）

React入门（二）---- 组件样式添加、嵌套和事件绑定

组件添加样式的几种方式

行内添加样式

import React, { Component,Fragment } from 'react';


export default class CompOne extends Component {

  styled = { // 实例属性
    text: {width: '100px',height: '100px',background: 'blue'}
  }

  render() {
    const styles = {
      text: {width: '100px',height: '100px',background: 'yellow'}
    }
    return (
      <Fragment>
        <h3> React样式添加 - 行内样式 </h3>
        <p style = {{width: '100px',height: '100px',background: 'red'}}></p>
        <p style = { styles.text }></p>
        <p style = { this.styled.text }></p>
      </Fragment>
    )
  }
}

引入外部的样式

import React, { Component,Fragment } from 'react';
import './App.css' //同理我们可以引入sass和less为标签添加样式，需安装node-sass或node-less插件

export default class App extends Component {

  render() {
   
    return (
      <Fragment>
        <h3> React样式添加 - 类名的添加 </h3>
        <p className = "box"></p>
      </Fragment>
    )
  }
}

使用classname插件控制组件样式

import React, { Component,Fragment } from 'react';
import './App.scss'
import classname from 'classname'

export default class App extends Component {

  render() {
   
    return (
      <Fragment>
        <h3> React样式添加 - 不同的条件添加不同的样式 </h3>
        <p className = {classname({
          bigsize: false,
          middlesize: true,
          smallsize: false,
          bg:true
        })}></p>
      </Fragment>
    )
  }
}

使用styled-components书写样式以及参数传入

import React,{ Component,Fragment } from 'react'
import styled from 'styled-components'

const AppContent = styled.div`
    width: 200px;
    height: 200px;
    border: 1px dashed black;
    header{
    width: 50px;
    height: 50px;
    background: ${ props => props.flag && 'purple' || 'red' };
        i{
            display: block;
            width: 25px;
            height: 25px;
            background: ${ props => props.color };
        }
    }
`

class App extends Component {
    render () {
        return (
            <Fragment>
                <AppContent flag={false} color="green" >
                    <header>头部<i></i></header>
                </AppContent>
            </Fragment>
        )
    }
}

export default App

组件的嵌套

import React,{ Component,Fragment } from 'react'

class Father extends Component {
    render () {
        return (
            <Fragment>
                <h3> This is Father</h3>
                {this.props.children}
                <Son>
                    <p>这是爸爸给你的</p>    
                </Son>
            </Fragment>
        )
    } 
}

class Son extends Component {
    render () {
        return (
            <Fragment>
                <h3>This is son</h3>
                {this.props.children}
            </Fragment>
        )
    }
}

class Comp extends Component {
    render () {
        return (
            <Fragment>
                <h2>This is boss </h2>
                <Father>
                    <p>这是老大给你的</p>
                </Father>
            </Fragment>
        )
    }
}

export default Comp

组件的事件绑定

事件绑定总共有四种方式

一、行内绑定事件

import React,{ Component,Fragment } from 'react'

export default class First extends Component {
    render () {
        return (
            <Fragment>
                <button onClick={ () => { alert('This is ok') } } > click me </button>
            </Fragment>
        )
    }
}

二、组件内使用箭头函数定义事件 【推荐】

import React,{ Component,Fragment } from 'react'

export default class Second extends Component {

    constructor (props) {
        super(props)
        this.state = {
            money : 10000
        }
    }

    changeMoney = () => {
        this.setState({
            money : 15000
        })
    }

    render () {
        const { money } = this.state
        return (
            <Fragment>
                <button onClick={ this.changeMoney } > change money </button>
                <p>{ money }</p> 
            </Fragment>
        )
    }
}

三、定义非箭头函数事件，行内使用bind改变this指向

import React,{ Component,Fragment } from 'react'

export default class Second extends Component {

    constructor (props) {
        super(props)
        this.state = {
            money : 10000
        }
    }

    costAll () {
        this.setState({
            money : 0
        })
    }

    render () {
        const { money } = this.state
        return (
            <Fragment>
                <button onClick={ this.costAll.bind(this) } > cost all </button>
                <p>{ money }</p> 
            </Fragment>
        )
    }
}

四、定义非箭头函数事件，在constructor内使用改变this指向【推荐】

import React,{ Component,Fragment } from 'react'

export default class Second extends Component {

    constructor (props) {
        super(props)
        this.state = {
            money : 10000
        }
        this.getMoney = this.getMoney.bind(this)
    }

    getMoney () {
        this.setState({
            money : 20000
        })
    }

    render () {
        const { money } = this.state
        return (
            <Fragment>
                <button onClick={ this.getMoney } > get money </button>
                <p>{ money }</p> 
            </Fragment>
        )
    }
}