react组件通信
1、组件通信通常分为以下几种方式:
(1)第一种父子组件通信
(2)第二种 父与孙子组件之间通信,
(3)第三种 兄弟组件通信或者说是不相关组件至今通信。
(4)消息订阅与发布
一、父子组件通信
1、父组件
export default class Father extends Component{
state={
// 这里的属性随意定义
id:111
}
const Edit = (value)=>{
console.log('修改的值:' + value)
}
render{
return {
<Child id={this.state.id} edit={this.Edit}/>
}
}
}
2、子组件
1、第一种方式是父子类组件传参
export default class Child extends Component{
state={
// 这里的属性随意定义
id:111
}
conponentDidMount(){
//只会执行一次,可以在任意方法里面通过this.props取出父组件传过来的属性和方法
//this.props.Edit()
}
render{
const {id} = this.props;
return {
<div>{id}</div>
}
}
2、第二种方式是通过函数组件传参
const Child =(props)=>{
//函数组件通过props方式获取父组件穿过来的任意的方法、值、对象等等
}
}
第二种方式、孙子组件传参
爷孙传参这种方式传参如果通过第一种方式传参也能行得通,但是需要经过儿子组件层层传递,比较麻烦。而且还有一个弊端,那就是如果穿多个方式代码量就多了不少,而且从父组件传递方法给孙子组件时,尊自组件不好取传递过来的方法。所以不推荐第一种方式通过多个组件传参。
这里就用到第二种方式context传参
context传参写法有两种,看个人喜好用哪种。我推荐使用第一种写法。
第一种写法
1、第一步、新建一个createContext.js 文件,文件名字自己定义
import { createContext } from 'react';
const context = createContext(null);
export default context;
2、第二步、在需要传参的组件也就是父组件所在的文件中引入 context
import context from '../../util/createContext'; //多层组件传参
//使用context.Provider传递参数 ,value里面是传递的参数,这里我是传递了一个actionTag点击的标签名,getEntityAttr 获取实体的属性方法
<context.Provider value={{tagName:actionTag,getEntityAttr:this.getEntityAttr}}>
//Myinput是里面的函数组件,属于儿子组件
<Myinput attr={entity} tagName={actionTag} getlatestData={this.getlatestData} getEntityAttr={this.getEntityAttr} formRef={this.myRef} />
</context.Provider>
3、第三步、儿子组件嵌套
const Myinput = (props) => {
//这里使用props是因为第二步方式我用props方式传递了参数,
<Col span={24} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: '10px' }}>
<Custom type="2"/> //Custom是孙子组件
<Button type="primary" onClick={handleSubmit} style={{marginLeft:20}}> 提交</Button>
</Col>
}
4、第四步、孙子组件Custom调用传递过来的参数
import React, { Component, useContext } from 'react';
//添加自定义属性
const Custom = (props) => {
const [isModalVisible, setIsModalVisible] = useState(false);
const [form] = Form.useForm();
const {gethierarchy,getEntityAttr,tagName} = useContext(context) ||{}; //这里将传递过来的属性解构赋值,不懂得可以去学习es6的方法
const showModal = () => {
setIsModalVisible(true);
};
const handleOk = () => {
form.submit();
setIsModalVisible(false);
};
const handleCancel = () => {
setIsModalVisible(false);
};
//提交自定义属性的值
const onFinish = (value)=>{
console.log(value)
//当类别为1时更新选择的层级下的属性,当为2时更新选择的实体的属性
if(props.type ==='1'){
gethierarchy(); //这里由于不同地方传递过来所以需要调用不同的方法,具体需求具体对待
}else{
getEntityAttr(tagName);
}
form.resetFields();
}
return (
<>
<Button type="primary" onClick={showModal}>
添加自定义属性
</Button>
<Modal title="自定义属性" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} maskClosable={false} >
<Form {...layout} form={form} onFinish={onFinish} style={{ maxHeight: 400, overflow: 'hidden', overflowY: 'auto' }}>
<Form.Item label="自定义属性名" name="label">
<Input />
</Form.Item>
<Form.Item label="自定义属性值" name="value">
<Input />
</Form.Item>
</Form>
</Modal>
</>
);
};
第二种写法
1、同样的方式新建一个context.js文件
import { createContext } from 'react'
export const { Provider, Consumer } = createContext();
2、第二步在传递的父组件这里引入context
import { Provider } from '../../util/createContext'; //多层组件传参
//方式和第一种写法类似
<Provider value={{tagName:actionTag,getEntityAttr:this.getEntityAttr}}>
<Myinput attr={entity} tagName={actionTag} getlatestData={this.getlatestData} getEntityAttr={this.getEntityAttr} formRef={this.myRef} />
</Provider>
3、在孙子组件中视同传递过来的参数
import { Consumer } from '../../util/createContext'; //多层组件传参
<Consumer>
{
//context就是一个对象,就是传递时的value
context => (
<>
{
tags.map((item, i) => {
return <Tag key={i} className={tagindex === i ? 'tag_active' : ''} onClick={() => this.handleTag(i, item, context)} style={{ lineHeight: '32px', cursor: 'pointer' }}>{item}</Tag>
})
}
</>
)
}
</Consumer>
第三种方式 不相关组件传参,使用redux方式,具体参考方式请参照 react组件传参的几种方式
第四种方式
import PubSub from 'pubsub-js';
//或者
const PubSub = require('pubsub-js');
//订阅消息
let token = PubSub.subscribe('test','测试数据');
//取消订阅
PubSub.unsubscribe('test');
//发布消息
PubSub.publish('test','测试数据');