与父节点通信的react.js自定义事件

reactjs React.js

村村伽罗Mandy

2020-03-13

我正在制作并监听正常的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的方法会更好吗?

第1523篇《与父节点通信的react.js自定义事件》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

5个回答
Tony阳光 2020.03.13

我知道到现在这个问题已经很老了,但是这个答案可能仍然可以帮助某个人。我为React写了一个JSX杂注,其中添加了声明式自定义事件:jsx-native-events

基本上,您只是使用该onEvent<EventName>模式来监视事件。

<some-custom-element onEventSomeEvent={ callback }></some-custom-element>
伽罗卡卡西猴子 2020.03.13

我发现还有另外一个非常合理的方法,特别是如果从父母到孩子到孩子的钻洞已经很麻烦。他称其为简单沟通。这是链接:

https://github.com/ryanflorence/react-training/blob/gh-pages/lessons/04-less-simple-communication.md

乐米亚 2020.03.13

中央存储[Redux]将状态分配给客户端,然后将状态“分派”回存储,这也类似于观察者模式。由于连接道具/事件路径的显式(脆弱的?)开销,使得发布/订阅的方法只会变得更糟。为了破解层次结构,React提供了上下文(提供者模式)或可观察到的可恶的库。就像MobX引入了新的 decorator@observable或Vue引入了新的模板语法“ v-if”。无论如何,事件是DOM和javascript事件循环工作的主要方式,所以为什么不呢?我认为撒旦主义者做到了。大声笑

猿小胖 2020.03.13

一个可能的解决方案,如果您绝对必须在ReactJs应用程序中采用Observer模式,则可以劫持一个正常事件。例如,如果您希望Delete键导致<div>标记为删除的a键,则可以<div>监听一个keydown事件,该事件将由customEvent调用。将keydown捕获到主体上,并customEvent在选定的上调度keydown事件<div>分享以防万一。

达蒙Tom 2020.03.13

如上所述:

React的方式是通过props将回调显式传递给子级。在React中不支持带有冒泡的自定义事件。

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

通过观察者模式对交互式系统进行编程非常困难且容易出错,但在许多生产环境中仍然是实现标准。我们提出一种逐渐弃用观察者的方法,以支持反应式编程抽象。几个库层可帮助程序员将现有代码从回调平稳地迁移到更具声明性的编程模型。

React哲学基于Command模式:

在此处输入图片说明

参考文献

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android