react组件参数传递

准备工作

1、创建react项目

npm i create-react-app -g
create-react-app myadmin //myadmin你的项目名称

2、在你项目的src文件夹中创建pages文件夹，pages文件夹下创建Context文件夹，然后在Context的文件夹下创建Child.js、index.js、Son.js三个文件
3、开始
在index.js文件中导入参数的类型并且导入子组件

import PropTypes  from 'prop-types';
//导入参数类型
import Child from './Child'
//导入子组件

定义需要传递参数的类型

 static childContextTypes = {
        color:PropTypes.string, // 字符串类型
        setColor:PropTypes.func,// 方法类型
    }

获取需要传参的数据

  getChildContext(){
        return {
            color:this.state.color,
            setColor:v=>this.setState({color:v})}
    }

数据的渲染

<h1>style={{color:this.state.color}}>组件context传递参数</h1>

在Child.js文件里
导入子组件并且导入数据类型

import Son from './Son.js'//导入子组件
import PropTypes  from 'prop-types';//导入数据类型

定义数据

static contextTypes = {
        color:PropTypes.string, // 字符串类型
        setColor:PropTypes.func,// 方法类型
    }

使用数据类型

 <h3 style={{color:this.context.color}}>Child组件</h3>

方法的调用
在Child.js中有个按钮，单击改变颜色

 <button onClick={()=>this.context.setColor('gold')}>金色</button>

在index.js父组件中

   onClick={()=>this.setState({color:'pink'})}

index.js父组件完整代码

import React, { Component } from 'react'
import PropTypes  from 'prop-types';
// 导入参数的类型
import Child from './Child'
class Context extends Component {
    constructor(props) {
        super(props);
        this.state = { color:"blue" };
    }
      // 目标 组件数据共享
    // 01 定义需要传递参数类型
    static childContextTypes = {
        color:PropTypes.string, // 字符串类型
        setColor:PropTypes.func,// 方法类型
    }
       // 02 获取需要传参的数据
    getChildContext(){
        return {
            color:this.state.color,
            setColor:v=>this.setState({color:v})}
    }
      render() {
        return (
            <div>
                <h1 
                onClick={()=>this.setState({color:'pink'})}
                style={{color:this.state.color}}>组件context传递参数</h1>
                <Child></Child>
            </div>
        );
    }
}
export default Context;

子组件Child.js完整代码

import React, { Component } from 'react'
import Son from './Son.js'
import PropTypes  from 'prop-types';
// 导入参数的类型
class Child extends Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
     // 定义数据
    static contextTypes = {
        color:PropTypes.string, // 字符串类型
        setColor:PropTypes.func,// 方法类型
    }
     render() {
        return (
           <div>
               <h3 style={{color:this.context.color}}>Child组件</h3>
               <button onClick={()=>this.context.setColor('gold')}>金色</button>
                <Son></Son>
            </div> 
        );
    }
}
export default Child;

运行效果图

单击切换按钮两行数字可以同时变为金色
单击 组件context传递参数 两行文字可以同时变为粉色

在孙子辈的组件中传递参数
在Son.js中导入数据类型

import PropTypes  from 'prop-types';

定义数据类型

   // 定义数据
    static contextTypes = {
        color:PropTypes.string, // 字符串类型
        setColor:PropTypes.func,// 方法类型
    }

使用数据类型

  <h6 style={{color:this.context.color}}>Son组件</h6>

方法的调用

<button onClick={()=>this.context.setColor('red')}>要红</button>

Son.js完整代码

import React, { Component } from 'react';
import PropTypes  from 'prop-types';
class Son extends Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
   // 定义数据
    static contextTypes = {
        color:PropTypes.string, // 字符串类型
        setColor:PropTypes.func,// 方法类型
    }
  render() {
        return (
            <div>
                <h6 style={{color:this.context.color}}>Son组件</h6>
                <button onClick={()=>this.context.setColor('red')}>要红</button>
                </div>
        );
    }
}
 export default Son;      

运行效果图

单击变红按钮三行文字同时变红