05-初学react

5.1利用ref属性，让父组件获取到整个子组件

先创建一个13-father.js的父组件，代码如下：

import React, { Component } from 'react' //引入React,Component
import Child2 from '../Navbar/child2'     //引入子组件
​
export default class APP extends Component {
  state = {
    cname:'' //用来接收子组件的值
  }
  child = React.createRef()  //创建ref,赋值给child
  render() {
​
    return (
      <div>
        <div>接收子组件的值：{this.state.cname}</div> //一开始canme内容为空
        <button onClick={()=>{
          this.getchild() //点击获取子组件的值的方法
        }}>点击获取子组件的值</button>
        <button onClick={()=>{
          this.delchild()//点击删除接收子组件的值的方法
        }}>点击删除接收子组件的值</button>
        <button onClick={()=>{
          this.delchild2() //点击删除子组件的值的方法
        }}>点击删除子组件的值</button>
        <Child2 ref={this.child}>
          
        </Child2>
​
      </div>
    )
  }
  //点击获取子组件的值的方法
  getchild(){
    this.setState({
      cname:this.child.current.state.name //把子组件的name值赋值给cname
    })
  }
//点击删除接收子组件的值的方法
  delchild(){
    this.setState({
      cname:''  //把cname赋值为空
    })
  }
//点击删除子组件的值的方法
  delchild2(){
    this.child.current.setState({
      name:'' //把子组件的name值赋值为空
    })
  }
}

创建子组件child2,代码如下：

import React, { Component } from 'react'
​
export default class Child2 extends Component {
  state = {
    name: '张三'
  }
  render() {
    return (
      <div>
        <div>
          子组件的值：{
            this.state.name //渲染name值
          }
        </div>
      </div>
    )
  }
  del(){ //删除name的值
    this.setState({
      name:''
    })
  }
}

5.2利用Context进行传值

创建一个16-利用Context进行传值.js文件作为父组件

import React, { Component } from 'react' //引入React,Component
import Child3 from '../Navbar/child3'   //引入子组件Child3
import Child4 from '../Navbar/child4' //引入子组件Child4
import '../../mock/api1'  //引入mock文件
import axios from 'axios'  //引入axios
import '../assembly/css/15-demo.less' //引入样式文件
​
const Context = React.createContext() //创建context对象
export default class APP extends Component {
    constructor() {
        super()
        this.state = ({
            lists: [],//定义lists变量用来接收mock模拟数据传过来的数据
            info: ''  //定义info用来作为点击事件后进行传值
        })
        axios.get('/test').then(res => {//利用axios获取mock数据
            this.setState({
                lists: res.data.list //接收mock模拟数据传过来的数据
            })
        })
     
​
    }
    render() {
        let newlist = this.state.lists.map(item => map方法遍历lists中的每一项,item是每一项
            <Child3 key={item.id} list={item.name} Context={Context}></Child3> //id是key,name是每一项的内容，Context是把context对象传过去
        )
         //定义一个对象作为Context.Provider的value值
     const cdata = {
            info: this.state.info, //info用来作为点击事件后进行传值
            changeinfo(value) { //更新info状态方法
                this.setState({
                    info: value //获取最新的info
                })
            }
        }
        return (
            <Context.Provider value={ //Provider用来将当前的 value 传递给以下的组件树。
                cdata //Context.Provider的value值
            }>
                <div className='box'>
                    <div className='child3'>
                        {
                            newlist //渲染newlist
                        }
                    </div>
​
                    <Child4 className='child4' Context={Context} //Context是把context对象传过去
                    ></Child4>
                </div>
            </Context.Provider>
        )
    }
​
}

​

child3子组件

import React, { Component } from 'react'
export default class Child3 extends Component {
​
    render() {
        const { list, Context } = this.props //解构父组件传过来的值，list作为传过来的lists中的每一项，Context作为传过来的context对象
        return (
            <Context.Consumer>
                {
                    (value) => { //接收Provider的value值
                        return (
                            <div onClick={() => { //获取list值点击事件
                                value.changeinfo(list)  //获取list值
                            }}>
                                {
                                    list
                                }
                            </div>
                        )
​
                    }
                }
            </Context.Consumer>
​
​
        )
    }
}
​

child4子组件

import React, { Component } from 'react'
export default class Child4 extends Component {
    render() {
        const { Context } = this.props //Context作为传过来的context对象
        return (
            <Context.Consumer>
                {
                    (value) => {
                        return (
                            <div>
                                {
                                    value.info //渲染点击过后传过来的值
                                }
                            </div>
                        )
                    }
                }
            </Context.Consumer>
​
        )
    }
}
​