react 组件之间的通信（父子组件）
一、父子组件
React中 组件内调用其他组件不需要进行 类似于vue 声明组件(components)
React 组件内调用其他组件 直接将组件导入 放置在对应的JSX 代码中
父子组件通信(传统)：
1、父组件->子组件 通过属性传递
2、子组件->父组件 父组件通过将自身的函数对象传递给子组件， 子组件执行父组件传递的函数来修改/传值操作
练习一：
Father:
import { Component } from 'react'
import Son from './Son';
class Father extends Component {
/* constructor(props){
super(props);
this.state = {
person: {
name: '张三',
age: 200
}
}
}
*/
state = {
person: {
name: '张三',
age: 200
},
arr: [1,2,3]
}
render() {
return (
Father组件:
{
this.state.arr.map( item => (
- {item}
) )
}
{/*
通过 自定义属性 vperson 将 this.state.person 传递给 Son
const vadd = (e, item) => this.handleAddArray(e.vitem);
vadd(event, 1000)
*/}
this.handleAddArray(e, vitem)}/>
)
}
handleAge(){
this.setState({
person: {...this.state.person, age: this.state.person.age +1 }
});
}
handleAddArray(e, item){
console.log('子组件调用父组件 handleAddArray..........');
// 向 arr 中末尾追加新元素
this.state.arr.push(item);
this.setState({
arr: this.state.arr
});
}
}
export default Father;Son:
import { Component } from 'react'
class Son extends Component {
/*
子组件 通过constructor 函数中的props 形参 接受 父组件 传递的所有属性
注： 子组件内不允许修改/更新 父组件所传递的 props
*/
constructor(props){
super(props);
console.log('Son props=>', props);
}
render() {
const { vperson } = this.props;
return (
Son
{/* {this.props.vperson.name}
{this.props.varr} */}
{vperson.name} --- {vperson.age}
)
}
add(){
// 调用父组件传递的 handleAge 函数
this.props.vhandle();
}
localadd(e){
this.props.vadd(e, new Date().getTime());
}
}
export default Son;
练习二：
Father:
import { Component } from 'react'
import Son from './Son';
class Father extends Component {
state = {
tabs : [
{
tid: '001',
title: '我的',
isActive: true
},
{
tid: '002',
title: '收藏',
isActive: false
},
{
tid: '003',
title: '设置',
isActive: false
}
]
}
render() {
const {tabs} = this.state;
return (
Father组件
this.changeItem(selectedId) }/>
)
}
changeItem(selectedID){
console.log('子组件调用父组件 changeItem 获取tab id=>', selectedID);
// 根据 selectedID 值 匹配 this.tabs 数组中的元素 如果匹配修改isActive=true 如果不匹配 isActive=false
this.state.tabs.forEach( item => {
if(item.tid === selectedID) item.isActive = true;
else item.isActive = false;
} )
this.setState({
tabs: this.state.tabs
});
}
}
export default FatherSon:
import { Component } from 'react'
/*
子组件接受 props 可以省略 constructor函数接受props ， 直接通过 this.props获取父组件传递的属性值
*/
class Son extends Component {
render() {
return (
Son组件
{/* 我的
收藏
设置 */}
{
this.props.tabsProps.map( tab => (
{tab.title}
) )
}
{
this.props.tabsProps.find( tab => tab.isActive ).title
}
)
}
selecteItem(selectedID){
console.log('选择tab id=>', selectedID);
this.props.changeItem(selectedID);
}
}
export default Son练习三：
props 数据类型校验 写法有两种：
1、在当前的类中定义 一个静态变量 static propTypes(该变量名称不允许随意修改)
2、在当前的类之外 定义一个静态变量 类名.propTypes(该变量名称不允许随意修改)
Father：
import { Component } from 'react';
import Son from './Son'
/*
props 数据类型检测
*/
class Father extends Component {
state = {
num: 100,
msg: 'Hello',
arr: [],
isFlag: true
}
render() {
const { num ,msg, arr, isFlag } = this.state;
return (
Father:
)
}
}
export default FatherSon:
import React, { Component } from 'react';
import FatherPropTypes from 'prop-types';
class Son extends Component {
/* static propTypes = {
pnum: FatherPropTypes.number, //数据类型 number
pmsg: FatherPropTypes.string,
parr: FatherPropTypes.array.isRequired, //必填属性
pisFlag: FatherPropTypes.bool
} */
render() {
const {pnum, pmsg, parr, pisFlag} = this.props;
return (
Son:
pnum:{pnum}
pmsg:{pmsg}
parr:{parr}
pisFlag:{pisFlag}
)
}
}
Son.propTypes = {
pnum: FatherPropTypes.number, //数据类型 number
pmsg: FatherPropTypes.string,
parr: FatherPropTypes.array.isRequired, //必填属性
pisFlag: FatherPropTypes.bool
}
export default Son;练习四:
props 默认值设置 写法有两种：
1、在当前的类中定义 一个静态变量 static defaultProps(该变量名称不允许随意修改)
2、在当前的类之外 定义一个静态变量 类名.defaultProps(该变量名称不允许随意修改)
什么时候调用默认值:
1、传递的prop 原本的值为 undefined 则调用 默认值
2、没有传递 prop 则调用 默认值
Father:
import { Component } from 'react';
import Son from './Son'
/*
props 默认值设置
*/
class Father extends Component {
state = {
num: undefined,
msg: undefined,
arr: undefined,
isFlag: undefined
}
render() {
const { num ,msg, arr, isFlag } = this.state;
return (
Father:
)
}
}
export default FatherSon:
import React, { Component } from 'react';
class Son extends Component {
/* static defaultProps = {
pnum: -1, //FatherPropTypes.number, //数据类型 number
pmsg: '没有文字',//FatherPropTypes.string,
parr: [-100, -200, -300],//FatherPropTypes.array.isRequired, //必填属性
pisFlag: false
} */
render() {
const {pnum, pmsg, parr, pisFlag} = this.props;
return (
Son:
pnum:{pnum}
pmsg:{pmsg}
parr:{parr}
pisFlag:{pisFlag}
)
}
}
Son.defaultProps = {
pnum: -1, //FatherPropTypes.number, //数据类型 number
pmsg: '没有文字',//FatherPropTypes.string,
parr: [-100, -200, -300],//FatherPropTypes.array.isRequired, //必填属性
pisFlag: false
}
export default Son;Son1:
import PropTypes from 'prop-types'
import { Component } from 'react'
/*
props 进行类型检测与默认值设置
*/
class Son1 extends Component {
static propTypes = {}
static defaultProps = {}
render() {
return (
Son1
)
}
}
export default Son1