React 父传子

一、初始化 src

在git执行命令

rm -rf  *  //删除全部文件

在src中新建一个 index.js

//导入react-dom
import ReactDOM from "react-dom"
//通过dom渲染
ReactDOM.render(
	<>
    <div></divdiv>
    </>
    ,document.getElementId("root")
)
// ReactDOM.render(
//	  <>
//   	<div></div>			//其中 “ ，”前面的标签只能是一个标签，不能多个，可以用 <></> 包多个标签
//    </>
//    ,document.getElementId("root")
//)

二、组件动态传值

index.js 中

//导入react-dom
import ReactDOM from "react-dom"
//引入组件模块
//import App from "./组件url"
import App from "./app"

//通过dom渲染
ReactDOM.render(
    //引入组件模块
	<App />
    ,document.getElementId("root")
)

组件中的代码

//这里引入react 必写
import React, { Component } from 'react'

export default class Father extends Component {
    //动态定义变量
    state = {
        num: 0
    }
    render() {
        return (
            <div>
                父组件
                <h1>{this.state.num}</h1>
                <button onClick={this.btnClick.bind(this)}>自增1</button>
            </div>
        )
    }
    btnClick() {
        this.setState({
            num: this.state.num + 1
            //注意，这里的自增不能是 this.state.num ++
        })
    }
}

**注意：这里函数中的自增不能用 num++，只能用 num+1

三、父传子------动态传值

基于上面的例子，引入子组件

父组件

import React, { Component } from 'react'
//引入子组件
import Child from "./Son"

export default class Father extends Component {
    //动态定义变量
    state = {
        num: 0
    }
    render() {
        return (
            <div>
                父组件
                {/* 显示自增后的数字 */}
                <h1>{this.state.num}</h1>
                {/* 定义点击事件 
                	<button onClick={this.变量名.bind(this)}>按钮</button>
                */}
                <button onClick={this.btnClick.bind(this)}>自增1</button>
                {/* 父组件动态传num给子组件 */}
                <Child num={this.state.num} />
            </div>
        )
    }
	// 点击事件定义
    btnClick() {
        this.setState({
            num: this.state.num + 1
            //注意，这里的自增不能是 this.state.num ++
        })
    }
}

子组件

import React, { Component } from 'react'

export default class Son extends Component {
    // 动态定义变量，注意，这里时props不是state
    props = {
        num: 0
    }
    render() {
        return (
            <div>
                子组件
                <h1>{this.props.num}</h1>
            </div>
        )
    }
}

四、父传子---------静态传值并且限制传值类型

父组件

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

export default class Father extends Component {

    render() {
        return (
            <div>
                // 父组件直接传值给子组件
                <Child num={123} />
            </div>
        )
    }
}

子组件

import React, { Component } from 'react'
// 子组件限制传进来的props属性的数据类型
import PropTypes from "prop-types"

export default class Son extends Component {
    // 静态定义默认变量
    static defaultProps = {
        num: 0
    }
    // 子组件定义静态属性
    static propTypes = {
        num: PropTypes.number.isRequired //设置为 isRequired 表示必须传值
    }
    render() {
        return (
            <div>
                子组件
                <h1>{this.props.num}</h1>
            </div>
        )
    }
}

五、使用context进行props属性值的多级传递

React中Context配置可以解决组件跨级值传递

childContextTypes 和 contextTypes 是不能省略的，跨级传值必须指定数据类型

实现步骤：
	父组件：
	1、 要引入prop-types
		import PropTypes from ”prop-types“
	2、子组件的传值类型
		//要用静态 static
		static childContextType={
			数据名：PropTypes.数据类型
		}
	3、向上下组件存值
		getChildContxt(){
			return(
				数据名：值
			)
		}
    
    
    
    子组件：
    只需要声明数据传进来的数据类型
    	static contextTypes={
    		数据名：PropTypes.数据类型
    	}
	引用的时候不适用 props，也不是用state ，而是用context  {this.context.数据名}

案例：

father.js

import React, { Component } from 'react'
import Child from "./Son"
// 引入 prop-types 定义子组件类型
import PropTypes from "prop-types"

export default class Father extends Component {
    // 定义变量
    state = {
        num: 0
    }
    // 定义子组件上下文类型
    static childContextTypes = {
        num: PropTypes.number
    }
    // 获取子组件上下文
    getChildContext() {
        return {
            num: this.state.num
        }
    }

    render() {
        return (
            <div>
                父组件
                <h1>{this.state.num}</h1>
                <button onClick={this.btnClick.bind(this)}>自增1</button>
                {/* 父组件动态传num给子组件 */}
                <hr />
                <Child />
            </div>
        )
    }
    btnClick() {
        this.setState({
            num: this.state.num + 1
            //注意，这里的自增不能是 this.state.num ++
        })
    }
}

son.js

import React, { Component } from 'react'
// 子组件限制传进来的props属性的数据类型
import PropTypes from "prop-types"
// 引入孙子组件
import Grandson from "./Grandson"

export default class Son extends Component {
    // 定义子组件上下文类型
    static contextTypes = {
        num: PropTypes.number
    }
    render() {
        return (
            <div>
                子组件
                {/* 使用context接受 */}
                <h1>{this.context.num}</h1>
                <hr />
                <Grandson />
            </div>
        )
    }
}

grandson.js

import React, { Component } from 'react'
// 引入 prop-types 定义子组件类型
import PropTypes from "prop-types"
export default class Grandson extends Component {
    // 定义上下文类型
    static contextTypes = {
        num: PropTypes.number
    }
    render() {
        return (
            <div>
                <h2>孙子组件</h2>
                <h2>{this.context.num}</h2>
            </div>
        )
    }
}