频道导航

reactjs – react.js自定义事件,用于与父节点通信

2020-06-15 React 前端之家

前端之家收集整理的这篇文章主要介绍了reactjs – react.js自定义事件,用于与父节点通信，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

@H_301_0@ 我正在制作和监听正常的DOM CustomEvents与父节点通信：

在孩子：

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特定的方式，会更好吗？

如上所述：

The React way would be to pass callbacks down to children explicitly via props — . There’s no support for custom events w/ bubbling in React.

反应式编程抽象是正交的：

Programming interactive systems by means of the observer pattern is hard and error-prone yet is still the implementation standard in many production environments. We present an approach to gradually deprecate observers in favor of reactive programming abstractions. Several library layers help programmers to smoothly migrate existing code from callbacks to a more declarative programming model.

React的理念是基于Command模式：

参考文献

> Deprecating the Observer Pattern
> Command Pattern: Command History
> Component Interop with React and Custom Elements
> Building Redux in TypeScript
> How is Mithril Different from Other Frameworks – Mithril