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

2024-01-19

我正在制作并监听普通 DOMCustomEvents 与父节点通信:

儿童时期:

  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 中不支持带有冒泡的自定义事件。

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

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

React 哲学基于命令模式:

参考

  • 弃用观察者模式 http://lambda-the-ultimate.org/node/4028
  • 命令模式:命令历史记录 http://www.cs.mcgill.ca/~hv/classes/CS400/01.hchen/doc/command/command.html
  • 与 React 和自定义元素的组件互操作 http://addyosmani.com/blog/component-interop-with-react-and-custom-elements/
  • 在 TypeScript 中构建 Redux http://blog.ng-book.com/introduction-to-redux-with-typescript-and-angular-2/
  • Mithril 与其他框架有何不同 - Mithril http://mithril.js.org/comparison.html
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

用于与父节点通信的react.js自定义事件 的相关文章

随机推荐

  • 自定义 MarshalJSON() 在 Go 中永远不会被调用

    我已经编写了自定义版本MarshalJSON and UnmarshalJSON My UnmarshalJSON按照我想要的方式被调用 但我无法让它工作MarshalJSON 这是总结我的问题的代码 package main import
  • 使用 ACTION_SEND 或 ACTION_SEND_MULTIPLE 发送图像和文本

    我们已经尝试过发布image and text使用下面的代码 final Intent shareIntent new Intent android content Intent ACTION SEND MULTIPLE shareInte
  • 无法编译适用于 Android 的 WebRTC 库

    我正在尝试编译 WebRTC Native Stack 来构建libwebrtc aar但不幸的是无法理解出了什么问题 系统信息 Distributor ID Ubuntu Description Ubuntu 18 04 4 LTS Re
  • 无法使用 jQuery 读取 CORS 请求的响应标头

    我有一个有效的跨域 Web 服务调用 我可以在其中取回有效负载 但我无法读取响应中的标头 Chrome 可以很好地显示请求中的标头 但它们在 jQuery 的成功处理程序中不可用 var data obj userName myUser p
  • 如何生成带有变音符号的 javadoc 文档?

    我正在尝试在 Eclipse 中生成 Java 文档 源文件采用 UTF 8 编码并包含一些umlauts https en wikipedia org wiki Diaeresis diacritic 生成的 HTML 文件不指定编码 也
  • R:枚举矩阵的列组合

    编辑注释 我将标题从 R grep 将字符串矩阵匹配到列表 更改为 R 枚举矩阵的列组合 以更好地反映解决方案 我正在尝试将字符串矩阵与列表进行匹配 以便我最终可以在以后的操作中使用该矩阵作为映射data frame 第一部分按预期工作 返
  • 如何在Go中通过隧道路由http Get?

    我有一个到我的服务器的 ssh 隧道 通过端口 9998 我希望我的 http GET POST 请求通过 Go 中的此端口进行路由 在 java 中 我将指定 DsocksProxyHost 和 DsocksProxyPort 我正在 G
  • 使用 ASP.NET Web API 2.1 配置依赖项注入

    我正在创建一个 ASP NET Web API 2 1 站点 并且由于我想将依赖项直接注入到控制器中 因此我创建了自己的 IDependencyResolver 实现 以便 StructureMap 将为我处理该问题 public clas
  • 使用通配符进行模式匹配

    如何使用通配符识别字符串 我找到了glob2rx 但我不太明白如何使用它 我尝试使用以下代码来选择数据框中以单词开头的行blue make data frame a lt data frame x c red blue1 blue2 red
  • 在逗号分隔的项目进度列表上运行循环 4GL

    def var cList as char no undo assign cList one two three four
  • 多线程代码中是否需要有原子标志?

    我想知道在多线程代码中是否真的有必要使用原子标志 对于这个问题 我重点关注多线程代码中的一个常见情况 通过设置标志来停止线程 我们假设以下伪代码 is running 1 create threads stopper thread runn
  • boost 正则表达式子字符串匹配

    如果模式 regular 是变量 st 的子字符串 我想返回输出 match 这可能吗 int main string st some regular expressions are Regxyzr boost regex ex Rr eg
  • Java 8 流 - 如何将地图中的地图中的所有对象提取到新地图中?

    我有一张地图 siteId gt AppName gt App 我想迭代内部地图中的所有应用程序并创建一个新地图 appId gt App 我在没有流的情况下做到了 Map
  • ASP 会员奇怪问题

    我在 ASP NET 中使用 Membership API 并且在临时服务器上遇到了以下问题 该应用程序在我的本地计算机上运行良好 数据表存储在 SQL Server 上 我的本地服务器和临时服务器都指向同一个数据库服务器 当我部署到临时服
  • 使用 boto3 验证 S3 凭证,无需 GET 或 PUT

    有没有一种方法可以验证给定的一组 S3 凭据是否可以访问特定存储桶 而无需执行某种显式的 PUT 或 GET 实例化 s3 Client s3 Resource 或 s3 Bucket 对象似乎根本不验证凭据 更不用说存储桶访问了 博托3
  • Lua string.gsub() 按 '%s' 或 '\n' 模式

    英语不是我的母语 所以描述这个问题有点困难 我想通过 lua string gsub 在 str 中获取 d 40 但是有一些问题 代码如下 本地字符串 a 10 b 20 c 30 d 40 本地 pat1 s s 本地 pat2 n s
  • 从 html 按钮调用 vbscript 函数

    如果我所做的完全错误或者解决方案是显而易见的 请不要感到惊讶
  • 从 x86 汇编语言调用 C 函数

    是否可以使用 GCC 从 C 函数生成汇编语言函数 以便可以从汇编语言程序中调用它们 我知道 gcc 将 C 编译为机器代码 可以很容易地反汇编为汇编语言 并且我已经知道可以C 中的内联汇编语言函数 https stackoverflow
  • 解析来自 BaseHTTPServer 的 Python HTML POST 数据

    我正在将几个文件从 HTML 表单发送到基于 BaseHTTPServer 的服务器 在我的 do POST 中 我从 rfile read length 获取一个字符串 它看起来像某种多部分 MIME 字符串 谷歌并没有帮助我将其解码为可
  • 用于与父节点通信的react.js自定义事件

    我正在制作并监听普通 DOMCustomEvents 与父节点通信 儿童时期 var moveEvent new CustomEvent the graph group move detail nodes this props nodes