我正在创建和监听普通的DOM CustomEvent以与父节点进行通信：
在子节点中：
var moveEvent = new CustomEvent('the-graph-group-move', {
detail: {
nodes: this.props.nodes,
x: deltaX,
y: deltaY
},
bubbles: true
});
this.getDOMNode().dispatchEvent(moveEvent);
componentDidMount: function () {
this.getDOMNode().addEventListener("the-graph-group-move", this.moveGroup);
},
这个方法是可行的，但是有没有更适合React的方式呢？
如上所述：
React的做法是通过props显式地向子组件传递回调函数，不支持自定义事件和冒泡。
响应式编程抽象是正交的：
通过观察者模式来编写交互式系统很困难且容易出错，但它仍然是许多生产环境中的实现标准。我们提出了一种方法，逐渐废弃观察者而采用响应式编程抽象。几个库层帮助程序员平滑地从回调迁移到更声明性的编程模型。
React哲学基于命令模式：
参考资料
您可以编写一个简单的服务，然后使用它。
/** eventsService */
module.exports = {
callbacks: {},
/**
* @param {string} eventName
* @param {*} data
*/
triggerEvent(eventName, data = null) {
if (this.callbacks[eventName]) {
Object.keys(this.callbacks[eventName]).forEach((id) => {
this.callbacks[eventName][id](data);
});
}
},
/**
* @param {string} eventName name of event
* @param {string} id callback identifier
* @param {Function} callback
*/
listenEvent(eventName, id, callback) {
this.callbacks[eventName][id] = callback;
},
/**
* @param {string} eventName name of event
* @param {string} id callback identifier
*/
unlistenEvent(eventName, id) {
delete this.callbacks[eventName][id];
},
};
例子（触发同样适用）
import eventsService from '../../../../services/events';
export default class FooterMenu extends Component {
componentWillMount() {
eventsService
.listenEvent('cart', 'footer', this.cartUpdatedListener.bind(this));
}
componentWillUnmount() {
eventsService
.unlistenEvent('cart', 'footer');
}
cartUpdatedListener() {
console.log('cart updated');
}
}
class Bus extends EventTarget {...}其中 "..." 实现了 发布-订阅 模式/接口(publish(), subscribe(), unsubscribe())，它只是简单地包装了 super.dispatchEvent()、super.addEventListener() 和 super.removeEventListener()（分别）。 - Codyimport * as React from 'react';
const MyEventContext = React.createContext(() => {});
const MyEventBubbleContext = ({children, onMyEvent}) => {
const bubbleEvent = React.useContext(MyEventContext);
const handleMyEvent = React.useCallback((...args) => {
// stop propagation if handler returns false
if (onMyEvent(...args) !== false) {
// bubble the event
bubbleEvent(...args);
}
}, [onMyEvent]);
return (
<MyEventContext.Provider value={handleMyEvent}>
{children}
</MyEventContext.Provider>
);
};
const MyComponent = () => (
<MyEventBubbleContext onMyEvent={e => console.log('grandparent got event: ', e)}>
<MyEventBubbleContext onMyEvent={e => console.log('parent got event: ', e)}>
<MyEventContext.Consumer>
{onMyEvent => <button onClick={onMyEvent}>Click me</button>}
</MyEventContext.Consumer>
</MyEventBubbleContext>
</MyEventBubbleContext>
);
export default MyComponent;
onEvent<EventName>模式来观察事件即可。<some-custom-element onEventSomeEvent={ callback }></some-custom-element>
如果你在ReactJs应用程序中绝对必须使用观察者模式，那么一个可能的解决方案是劫持普通事件。例如，如果您想要将删除键引起标记为删除的 <div>，您可以让 <div> 监听 keydown 事件，该事件将被自定义事件调用。在 body 上捕获 keydown，并在选定的 <div> 上分派 customEvent keydown 事件。分享一下，以帮助有需要的人。
我发现另外一个方案也非常合理，特别是当从父组件到子组件再到孙子组件的钻孔变得很麻烦时。他称之为“不那么简单的通讯”。以下是链接：
https://github.com/ryanflorence/react-training/blob/gh-pages/lessons/04-less-simple-communication.md
<Child onCustomEvent={this.handleCustomEvent} />。React不支持带有冒泡功能的自定义事件。 - andreypopp