父子组件之间通信
父组件向子组件通信
import React, { Component, Fragment } from 'react';
import ManageStockPop from '@/pages/groupOrder/components/ManageStock';
export default class GroupOrderDetail extends Component {
state = {
manageStockVisible: false,
};
render() {
const {
manageStockVisible,
} = this.state;
return (
<ManageStockPop
visible={manageStockVisible}
/>
);
}
}
import React, { Component } from 'react';
export default class ManageStockPop extends Component {
constructor(props) {
super(props);
this.state = {
visible: false,
};
}
static getDerivedStateFromProps(nextProps, preState) {
if (nextProps.visible !== preState.visible) {
return {
visible: nextProps.visible,
};
}
return null;
}
render() {
let { visible } = this.state;
return (
<Modal
width="800px"
title="title"
visible={visible}
>
</Modal>
);
}
}
子组件向父组件通信
import React, { Component } from 'react';
export default class ManageStockPop extends Component {
constructor(props) {
super(props);
this.state = {
visible: false,
};
}
static getDerivedStateFromProps(nextProps, preState) {
if (nextProps.visible !== preState.visible) {
return {
visible: nextProps.visible,
};
}
return null;
}
haddleCancel = () => {
this.setState({
visible: false,
});
const { onClose } = this.props;
onClose && onClose();
};
haddleSubmit = () => {
const { onChange } = this.props;
onChange && onChange();
this.haddleCancel();
};
render() {
let { visible } = this.state;
return (
<Modal
width="800px"
title="title"
visible={visible}
onOk={() => this.haddleSubmit()}
onCancel={this.haddleCancel}
>
</Modal>
);
}
}
import React, { Component, Fragment } from 'react';
import ManageStockPop from '@/pages/groupOrder/components/ManageStock';
export default class GroupOrderDetail extends Component {
state = {
manageStockVisible: false,
};
manageStockClose = () => {
this.setState({
manageStockVisible: !this.state.manageStockVisible,
});
};
manageStockChane = () => {
this.setState({
manageStockVisible: !this.state.manageStockVisible,
});
};
render() {
const {
manageStockVisible,
} = this.state;
return (
<ManageStockPop
visible={manageStockVisible}
onClose={this.manageStockClose}
onChange={this.manageStockChane}
/>
);
}
}
无关系组件之间通信
- 安装event
npm install event -save
- 创建Event.js
import { EventEmitter } from 'events';
export default new EventEmitter();
- 使用
发布者使用emit事件触发方法
订阅者通过addListener方法进行事件监听
订阅者通过removeListener方法进行事件销毁
import event from './Event.js';
event.emit('eventUse', 'Hello 我来发消息了');
componentDidMount () {
event.addListener('eventUse', (msg) => {
console.log('收到消息--'+msg)
})
}
componentWillUnmount () {
event.removeListener('eventUse', (msg) => {
console.log('即将销毁此消息--'+msg)
})
}