欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

react组件参数传递

程序员文章站 2024-02-28 08:46:16
...

准备工作

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;

运行效果图
react组件参数传递
单击切换按钮两行数字可以同时变为金色
单击 组件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;      

运行效果图
react组件参数传递
单击变红按钮三行文字同时变红

上一篇: react创建组件及注意事项

下一篇: