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;
运行效果图
单击切换按钮两行数字可以同时变为金色
单击 组件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创建组件及注意事项