React组件的render函数中返回DOM元素

2024-01-03

我有一个外部库,可以呈现一些自定义 js 控件。该库返回一个可以插入到页面中的 DOM 元素。

我正在 React 中为这个库创建包装器。我已经将所有内容都连接起来,但我不确定如何允许渲染函数接受 DOM 元素作为其返回

render() {
 if (this.state.someType) {
   let customControl = new this.state.someType();
   var node = customControl.getNode(); 

   return node; //This is an HTMLDOMElement i.e. div or span
 }

 return <div>Loading Custom Control...</div>;
}

我能够调试代码并且一切正常。该节点是我所期望的,但页面上的 html 从未被替换。


这是一个简单的例子。

render() {
   const newNode = document.createElement('p'); 
   return <div ref={(nodeElement) => {nodeElement && nodeElement.appendChild(newNode)}}/>
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React组件的render函数中返回DOM元素 的相关文章

  • Jquery - (重新)连接动态生成的元素

    很多时候 我的元素与附加功能挂钩 例如 myfav autocomplete myfav datepicker myfav click somefunction 但是 当通过某些代码动态生成此类的更多实例时 新的 myfav 已经死了 需要
  • 从提交的表单中获取值

    我有一个非常简单的表格
  • React-i18next 出现错误尝试导入错误

    我尝试使用https react i18next com https react i18next com 对于本地化 我收到错误 尝试导入错误 initReactI18next 未从 react i18next 导出 这是我的 i18n j
  • Javascript - 删除粘贴上的空格

    我有一个最大长度为 10 的输入文本字段 该字段用于澳大利亚电话号码 10 位数字 电话号码通常分为以下语法 12 12345678 如果有人复制上面的内容并将其粘贴到我的输入字段中 显然会留下最后一位数字并保留空格 有没有办法在粘贴到输入
  • Google 地图自动完成 - 最多 3 个字符类型

    我已经实现了带有搜索框的谷歌地图 它允许用户通过搜索来选择地址 在该搜索框中 即使我输入 1 个字符 它也会进行搜索 我希望用户至少输入 3 个字符 否则它不应该进行搜索 My JS Fiddle is http jsfiddle net
  • req.body 为空 Express js

    我花了几个小时试图找出为什么 req body 是空的 我在 stackoverflow 上到处查看并尝试了所有方法 但没有运气 Express js POST req body 空 https stackoverflow com ques
  • 处理重叠 SVG 图层中的鼠标事件

    我正在使用 d3 js 构建地图可视化 我正在为美国各州和县绘制填充多边形 县的 SVG 图层位于州图层下方 状态已填充 但填充不透明度设置为 0 我认为 需要填充来捕获点击事件 我想捕获州级的点击事件 但我想捕获县级的鼠标悬停事件 但是
  • underscore.js 中断路器的重要性是什么? [复制]

    这个问题在这里已经有答案了 In 下划线 js http underscorejs org docs underscore html 有这样的代码 if iterator call context obj keys i keys i obj
  • 获取顶部框架的 URL

    在 Facebook 应用程序中 我需要检查顶部框架 主窗口 URL 是什么 并相应地显示内容 我尝试使用以下内容 if top location toString toLowerCase indexOf facebook com lt 0
  • 如何从 JQuery - IonRangeSlider 获取值?

    我怎样才能得到低值和高值ion rangeSlider http ionden com a plugins ion rangeSlider en html通过单击按钮来组件 这是我的 jQuery 代码
  • HTML 5 视频:使用 javascript 播放多个“剪辑”

    我在 HTML 视频和 JavaScript 方面遇到问题 因此编写了一些简单的代码来演示 有一个视频包含三个 剪辑 全长五秒 显然 在现实世界中 它们要长得多 一个在 25 30 秒 一个在 55 60 秒 最后一个在 85 90 秒 我
  • 如何从嵌套 FormGroup 添加/删除 FormControl

    candidateForm FormGroup constructor private fBuilder FormBuilder ngOnInit this candidateForm this fBuilder group fname n
  • 仅在文件下载完成后设置 cookie。

    我有一个场景 我想告诉用户下载完成并提示关闭按钮 为此 我使用 jquery 插件来连续监视 cookie 以了解下载何时完成 我的问题是我想设置这个cookie fileDownload true and path 下载完成后立即进行 为
  • 删除添加空值的Javascript对象项[重复]

    这个问题在这里已经有答案了 我有一个 JavaScript 对象 finalTitleList Title ffd Iscompleted Id 0 Title fdfmdbk Iscompleted Id 1 Title fdf d Is
  • 如何检查 Node.js 中是否定义了变量?

    我正在用node js 编写一个程序 它实际上是js 我有一个变量 var query azure TableQuery 看起来这行代码有时没有执行 我的问题是 我怎样才能做到这样的条件 if this variable is define
  • 你可以推荐什么 JavaScript 缓存 [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我正在寻找一个好的javascript内存缓存库来缓存客户端计算结果 我的要求 适用于 Internet Explorer FireFox
  • 自动打开默认电子邮件客户端并预填充内容

    当用户在页面上保存某些内容时 我需要自动打开用户的默认电子邮件客户端 我需要填充电子邮件主题 地址并在电子邮件正文中添加一些内容 实现这一目标的最佳选择是什么 我知道mailto 属性 但用户必须单击此属性 我不确定它是否允许您指定主题和内
  • 检查用户是否登录 Facebook

    我正在尝试使用 javascript 检查用户是否登录 Facebook 刚刚登录或未登录 与我的应用程序无关 我尝试在 FB init 之后使用以下代码 FB getLoginStatus function response alert
  • 如何使用 useQuery 挂钩来填充其他挂钩中的状态?

    我最近一直在处理一些与钩子相关的问题 因为我一直在我的一个项目中实现钩子 我不断收到错误 渲染的钩子数量比上一次渲染期间的钩子数量多 看来我能让代码正常工作的唯一方法是将 useQuery 挂钩放在所有其他挂钩之后 然而 这是一个问题 因为
  • 如何使用 javascript 获取 html5 视频的缩略图?

    我找到了根据 URL 获取视频缩略图的 JavaScript 代码 不过 我只在 YouTube 和 Vimeo 上找到了这个 似乎没有人列出如何处理旨在嵌入 html5 视频标签的视频的示例 能做到吗 谢谢 是的 您可以使用视频作为画布的

随机推荐

  • 什么是数据对齐?在 C 中类型转换指针时,为什么以及何时应该担心? [复制]

    这个问题在这里已经有答案了 我找不到一个像样的文档来解释对齐系统如何工作以及为什么某些类型比其他类型更严格地对齐 我会尝试简短地解释一下 什么是数据对齐 计算机的体系结构由处理器和内存组成 记忆是按细胞组织的 因此 0x00 data 0x
  • StackExchange 站点如何关联用户帐户和 OpenID 登录信息?

    我喜欢 StackExhchange StackOverflow 集成 OpenID 的方法 据我了解 这个过程是这样的 如果用户向 OpenID 提供商 即 Google 注册 StackOverflow 或类似网站 会为该用户创建一个帐
  • Python 类中的线程

    我最近开始使用python的线程模块 经过一番尝试和错误后 我设法使用大多数教程中给出的以下示例代码来使基本线程工作 class SomeThread threading Thread def init self count threadi
  • 2021年8月18日SDK更改后如何从代码中设置azure实验名称?

    2021 年 8 月 18 日 Microsoft 为了我们的方便 对其 Azure ML SDK 进行了以下更改 https learn microsoft com en us azure machine learning azure m
  • JSF 注释不适用于 Spring-boot

    我曾试图使用来自Spring Boot 和 JSF Primefaces Richfaces https stackoverflow com questions 22544214 spring boot and jsf primefaces
  • 如何从 Chrome 扩展程序向本机应用程序发送消息?

    我有一个用 C 编写的本机应用程序 我可以使用以下命令将数据从本机应用程序发送到 chrome 扩展如何从本机应用程序向 Chrome 扩展程序发送消息 https stackoverflow com questions 18134665
  • 连接可选列表

    我有三个Optional gt 必须将它们组合并返回 我尝试使用Optional map and flatmap 但没有成功 public Optional
  • 春季启动日志记录

    我正在使用 Spring boot 构建一个简单的 REST 服务 我想知道处理日志记录的最合适的方法 In my 应用程序属性文件我有以下内容 logging level org springframework web DEBUG 在开发
  • 并行代码可扩展性差

    最近我一直在分析我的并行计算在 16 核处理器上实际上是如何加速的 我得出的一般公式 线程越多 每个核心的速度就越慢 让我很尴尬 以下是我的CPU负载和处理速度的图表 因此 您可以看到处理器负载增加 但速度增加得慢得多 我想知道为什么会发生
  • 如何使用opencv python在对象中找到用于测量目的的参考点? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 输入图像寻找参考点 https i stack imgur com g0Dt1 png 我的问题陈述是我想测量钻头的长度 因此 如果我
  • 如何监视默认导出函数

    sinon spy 有 2 个参数 对象和函数名称 我有一个模块如下所示 module exports function xyz 我如何定义间谍xyz 我没有可以使用的对象名称 想法 如果你使用 ES6 模块导入功能 上面的方法实际上不起作
  • 使用现有的 pptx 创建新的 pptx Python-Pptx

    我正在尝试使用 old pptx 创建 new pptx old pptx 有 4 张幻灯片 我想在 4 张幻灯片中创建内容几乎相同的 new pptx 仅进行少量文本修改 我跳过了下面代码中的修改部分 您可以举个例子 例如将小写字母转换为
  • 导入 shapefile 外部的遮罩区域(底图/matplotlib)

    我正在通过 Matplotlib 在美国和加拿大东海岸的底图上绘制数据 除了基础层 填充的等值线图 之外 我还使用 Matplotlib 的 readshapefile 工具将此焦点区域的 shapefile 覆盖在数据之上 我想知道如何屏
  • 将蛋糕脚本中的警告消息记录在文本文件中

    我正在使用下面的蛋糕脚本来编译我的C 项目 中显示的警告消息很少PowerShell执行脚本时 我喜欢将警告记录在物理位置的文本文件中 例如 D WarningReport txt 下面是我用来编译项目的蛋糕脚本任务 Task Build
  • 使用JNI而不是JNA调用本机代码?

    与 JNI 相比 JNA 似乎更容易用来调用本机代码 在什么情况下您会使用 JNI 而不是 JNA JNA 不支持 C 类的映射 因此如果您使用 C 库 则需要 jni 包装器 如果你需要大量的内存复制 例如 您调用一个方法 该方法返回一个
  • 在 Pygame 上播放 midi

    好的 这就是我得到的 import pygame import sys from pygame locals import bif bg jpg mif pkmn png sif bubble png song 1 testaudio mi
  • base64 解码的文件不等于原始未编码的文件

    我有一个普通的pdf文件 A pdf 第三方以base64对该文件进行编码 并将其作为长字符串在网络服务中发送给我 我无法控制第三方 我的问题是 当我使用 java org apache commons codec binary Base6
  • 什么是好的、众所周知的 JavaScript MVC 模式?

    在 ASP NET MVC 应用程序中管理 JavaScript 文件和函数 对象上下文的最佳方法是什么 谷歌说http javascriptmvc com http javascriptmvc com
  • 在 Quartz 作业中使用 CDI

    我想知道是否可以在 Quartz 作业中以可移植的方式使用 CDI bean 我已经尝试编写自己的 JobFactory 等 但问题是 BeanManager 无法通过 JNDI 使用 因为作业在非托管线程中运行 我的应用程序服务器是 We
  • React组件的render函数中返回DOM元素

    我有一个外部库 可以呈现一些自定义 js 控件 该库返回一个可以插入到页面中的 DOM 元素 我正在 React 中为这个库创建包装器 我已经将所有内容都连接起来 但我不确定如何允许渲染函数接受 DOM 元素作为其返回 render if