React基础二

React基础二

React中css样式

1、组件内部定义

内部定义css有三种方式

第一种：内联样式添加

第二种：组件内部函数定义样式变量

第三种：组件内部定义属性

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

export default class One extends Component{

    styled = {
        text:{width:'100px',height:'100px',background:'blue'}
    }
    render(){

        const styles = {
            text:{width:'100px',height:'100px',background:'green'}
        }
        return (
            <Fragment>
                <h3> 添加样式 </h3>
                <p style = {{width:'100px',height:'100px',background:'red'}}>内联样式添加</p>

                <p style = {styles.text }>组件内部函数定义样式变量</p>

                <p style = {this.styled.text}>组件的实例属性定义样式变量</p>

            </Fragment>
        )
    }
}

2、外部引入css

直接引入外部css

import React,{Component} from 'react'

import './two.scss'

export default class Two extends Component{
    render(){
        return (
            <p className= 'size bg'>外部引入scss</p>
        )
    }
}

通过classname插件实现，不同的条件添加不同的样式

import React,{ Component } from 'react'

import './three.scss'

import classname from 'classname'

export default class Three extends Component{
    render(){
        return(
            <p className = { classname({
                size:true,
                danger:false,
                success:true
            })}>通过classname插件实现，不同的条件添加不同的样式</p>
        )
    }
}

通过安装classname插件来实现通过类名的的值来实现样式添加与否

3、css组件

React认为一切皆组件，那么样式也应该是一个组件

styled-components是针对React写的一套css-in-js框架，简单来讲就是在js中写css

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

const Container = styled.div`
    width: 200px;
    height: 200px;
    border: 1px dashed black;
    background: orange;
`

这样Container就是一个组件了，我们可以直接使用他

事件的四种写法

1、在render函数中直接写

import React,{ Component } from 'react'

export default class EventOne extends Component{
    render(){
        return (
            <button onClick = { ()=>{alert(1)}}>render中直接写函数</button>
        )
    }
}

2、在组件中以箭头函数定义函数

export default class EventTwo extends Component{
    constructor(){
        super()
        this.state ={
            money:1000
        }
    }
    moneychange = () =>{
        this.setState({
            money:1000000
        })
    }
    render(){
        const { money } = this.state
        return(
            <div>
                <button onClick={this.moneychange}>点我</button>
                <p>{money}</p>
            </div>
        )
    }
}

3、普通定义函数，以bind改变this指向

export default class EventThree extends Component {
    constructor(){
        super()
        this.state = {
            money:100
        }
    }
    moneychange(){
        this.setState({
            money:100000
        })
    }
    render() {
        const {money} =this.state
        return (
            <div>
                <button onClick = {this.moneychange.bind(this)}>点饿哦</button>
                <p>共有{money}元</p>
            </div>
        )
    }
}

4、普通定义函数在状态中调用改变this指向

export default class EventFour extends Component {
    constructor(){
        super()
        this.state = {
            money:100
        }
        this.moneychange = this.moneychange.bind(this)
    }
    moneychange(){
        this.setState({
            money:10000
        })
    }
    render() {
        const { money } = this.state
        return (
            <div>
                <button onClick = {this.moneychange}>点我</button>
                <p>{ money }</p>
            </div>
        )
    }
}

事件传参的两种方式

1、在组件内定义函数并调用

change = (e) =>{
    this.setState({
        [e.target.name]:e.target.value
    })

}
    render() { 
        const { a,b} = this.state
        return (
            <div>
                <input type="text" name="a" onChange = {this.change}/>
                <input type="text" name="b" onChange = { this.change}/>
                <p> {a}{b}</p>
            </div>
        )
    }
}

2、在render函数传参（多用于函数是传递过来的）

<div className="input-group">
 <input type="text" className="form-control" placeholder="请添加待办事项" aria-describedby="basic-addon1" onKeyUp = {
        (e)=>{if(e.keyCode==13){
            val.addItem(e.target.value)} }}/>
   </div>

组件通信

1、父子通信

import React, { Component } from 'react'
import Son from './Son'

export default class Father extends Component {
    constructor(){
        super()
        this.state = {
            money:1000
        }
    }
    render() {
        const {money} = this.state
        return (
            <div>
                <p>这里是父组件</p>
                <Son money={money}></Son>
            </div>
        )
    }
}

通过子组件的属性来传递父组件的状态值

2、子父通信

import React, { Component } from 'react'
import Son from './Son'

export default class Father extends Component {
    constructor(){
        super()
        this.state = {
            money:0
        }
    }

    handler = (val) =>{
        this.setState({
            money:val
        })
    }
    render() {
        const {money} = this.state
        return (
            <div>
               
                <Son handler = {this.handler}></Son>
                <p>儿子给我{money}</p>
            </div>
        )
    }
}

子父通信是通过父组件传递方法给子组件，子组件调用父组件传递过来的方法来实现的

注意： 自己的状态自己更改

3、非父子通信

适用于父组件下面有两个组件（A、B）需要通信，通过父组件做中间的转换，将要改变的组件(A)的方法传递给父组件，再由父组件传递给要控制A变化的组件B来实现的，总的来说自己的状态只能自己改变

父组件

import React, { Component } from 'react'
import Bson from './Bson'
import Sson from './Sson'

export default class Father extends Component {
    kick = () =>{
        this.son.changeFlag()
    }
    render() {
        return (
            <div>
               <Bson kick = {this.kick}/> 
               <Sson ref={ el =>this.son = el}/>
            </div>
        )
    }
}

A组件

import React, { Component } from 'react'

export default class Sson extends Component {

    constructor(){
        super()
        this.state = {
            flag:false
        }
    }
    changeFlag = () => {
        this.setState({
          flag: true
        })
      }
    render() {
        const { flag } = this.state
        return (
            <div>
                <p>{flag&&'zhen'||'我是我'}</p>
            </div>
        )
    }
}

4、跨组件通信

跨组件通信是通过创建上下文 React.createContext()来实现的

具体的使用方法如下

import React, { Component,createContext } from 'react'
import Head from '../components/Head'
import List from '../components/List'
import { sss } from '../utils'

export const {Provider, Consumer} = React.createContext();
export default class Layout extends Component {

   render() {
        const val = this.state 
        return (
           
                <Provider  value = {val }>
                     <div className="container">
                <Head/>
                <List/>
                </div>
                </Provider>
           
        )
    }
}

定义上下文，并将需要调用此组件的方法和状态的子组件包裹起来

接收一个 value 属性传递给Provider 的后代 Consumers。一个 Provider 可以链接到多个 Consumers。Providers 可以被嵌套以覆盖组件树内更深层次的值。

子组件使用如下：引入Consumer,在render函数渲染时用Consumer将要渲染的内容包裹起来，用（val）=>

来使用

import React, { Component } from 'react'
import { Consumer } from "../layout/Layout";
export default class Head extends Component {
    render() {
        return (
            <Consumer>
                {
                    (val)=>
                    <div className="input-group">
                    <input type="text" className="form-control" placeholder="请添加待办事项" aria-describedby="basic-addon1" onKeyUp = {
                        (e)=>{
                           if(e.keyCode==13){
                            val.addItem(e.target.value)
                           } 
                            }}/>
                    </div>
                }
            </Consumer>

        )
    }
}