天道酬勤,学无止境

Return DOM element in render function of React component

问题

我有一个呈现一些自定义 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 永远不会被替换。

回答1
render() {
   const newNode = document.createElement('p'); 
   return <div ref={(nodeElement) => {nodeElement && nodeElement.appendChild(newNode)}}/>
}
回答2

渲染一个普通的 JSX div 。 在里面使用ref

ref回调中使用.appendChild(node)

见 https://reactjs.org/docs/refs-and-the-dom.html

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • React.js 初级入门学习, 你学废了吗?
    文章目录 React.js 初级入门学习, 你学废了吗?React 简介React学习路线React与Vue的对比组件化方面开发团队方面更多对比 为什么要用ReactReact 特点React中的核心概念虚拟DOM (Virtual DOM)什么是DOM?什么是VituralDOM?为什么需要VituralDOM?简单总结虚拟DOM(Vitural DOM)的处理方式简单总结虚拟DOM Diff算法了解更多 React 入门环境准备搭建本地开发环境开发者工具 Hello ReactcreateElement()的问题JSX 的基本使用JSX的注意点React组件React创建组件的两种方式函数式组件 和 class 组件的使用场景给组件传递数据封装组件到独立的文件中props和statepropsstate 组件的生命周期组件生命周期函数总览组件生命周期 - 创建阶段(Mounting)组件生命周期 - 运行阶段(Updating)组件生命周期 - 卸载阶段(Unmounting)了解更多 state和setState组件绑定事件事件绑定中的this通过bind绑定通过箭头函数绑定 条件渲染列表 & Key受控组件 学习参考 React.js 初级入门学习, 你学废了吗? React 简介 React 起源于Facebook的内部项目,因为该公司对市场上所有JavaScript
  • React Component和React Element之间的区别(Difference between React Component and React Element)
    问题 React Component和React Element有什么区别? 该文档提到了两者,但没有详细介绍,某些方法需要组件,其他元素... 回答1 这里涉及三种相关的事物,它们都有自己的名称: 组件组件实例元素 这有点令人惊讶,因为如果您习惯于其他UI框架,那么您可能会期望只有两种,大致对应于类(如Widget )和实例(如new Widget() )。 在React中不是这种情况。 组件实例与元素不一样,它们之间也不存在一对一的关系。 为了说明这一点,请考虑以下代码: import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; class MyComponent extends React.Component { constructor(props) { super(props); console.log('This is a component instance:', this); } render() { const another_element = <div>Hello, World!</div>; console.log('This is also an element:', another_element); return another_element;
  • react学习—渲染过程(首次渲染)
    渲染过程 一、渲染过程1、渲染原理2、首次渲染(新节点渲染) 一、渲染过程 1、渲染原理 渲染:生成用于显示的对象,以及将这些对象形成真实的DOM对象 React元素:React Element,通过React.createElement创建(语法糖:JSX) 例如:<div><h1>标题</h1></div><App /> React节点:专门用于渲染到UI界面的对象,React会通过React元素,创建React节点,ReactDOM一定是通过React节点来进行渲染的 节点类型: React DOM节点:创建该节点的React元素类型是一个字符串 import React from 'react'; import ReactDOM from 'react-dom'; const app = <div><h1>标题</h1></div> ReactDOM.render(app, document.getElementById('root')); React 组件节点:创建该节点的React元素类型是一个函数或是一个类 import React from 'react'; import ReactDOM from 'react-dom'; import App from "./App" ReactDOM.render(<App />, document
  • 从 React 元素获取 HTML 标签名称?(Get HTML tag name from React element?)
    问题 是否可以从 React 元素(从组件返回)获取 HTML 标记名称? 例如: function Foo() { return <span>Hello</span>; } HTML 标记名称将为span 。 我知道你可以查看 React 元素的type属性,但是在 SFC 和普通组件之间真的很难,当组件深度相当大时更难。 例如: function Bar() { return <Foo />; } 仍然应该返回span 。 回答1 不。 React Elements 是一个虚拟构造,它们不直接表示 DOM 元素。 有两种类型的 React 元素 - “常规” HTML DOM 元素和 React 类的实例化。 第一个有一个“类型”,因为它非常简单、无状态且不可变,并且创建只是为了呈现其对应的 DOM 元素(但不要将它与 DOM 元素本身混淆!)一个例子是<div>Foo</div> JSX 中的<div>Foo</div>或React.createElement("div", null, "Foo") 。 然而,React 类的实例没有“类型”,因为它们不代表典型的 DOM 元素。 当我们实例化一个 React 类时,我们称它为“组件”,以将其标识为类的单个实例,具有render方法、封装状态等。无法检索组件的“类型”,因为实际的 DOM
  • React基础学习
    一、学习主要内容 ​ 浏览器原理建设高性能网站组件开发高级语法SSRReduxReact RouterReact UIcreate-react-app单元测试ReactNative项目实战 1.1 获取react Git地址: https://github.com/facebook/react 获取React: npm install react react-dom 注: 在ES5开发中,可以通过bower获取react.js和react-dom.js文件,我们使用最新版本中,只能使用ES6开发 二、 组件开发 2.1 创建虚拟DOM 核心库: react提供了createElement方法用来创建虚拟DOM 第一个参数表示虚拟DOM名称(也可以是组件名称)第二个参数表示虚拟DOM的属性对象从第三个参数开始,表示子虚拟DOM 2.2 虚拟DOM简介 虚拟DOM是一个普通js对象,存储一些必要属性来描述DOM type 表示虚拟DOM类型key 表示虚拟DOM的idref 表示对真实DOM的引用props 表示虚拟DOM中所有属性对象children 表示虚拟DOM的子虚拟DOM字符串 表示一个文本节点对象 表示一个虚拟DOM数组 表示多个虚拟DOM或者文本。 2.3 渲染虚拟DOM 浏览器端渲染库react-dom,提供了render方法,可以渲染虚拟DOM
  • React面试题,全全全!!!(全家桶)
    创建react项目命令: npx create-react-app my-app 进入文件夹: cd my-app 启动项目: npm start(开发模式下运行) npm test(测试环境运行) npm run build(打包为生产模式) 显示配置文件:不可逆的,只要显示了就没有任何方法再隐藏回去 npm run eject 为什么在src创建子目录? webpack只处理src的中的文件。如果不讲css和html放在src文件夹下,webpack发现不了。 react是单页面应用程序 1.React是什么? 用来构造用户界面的JS库 2.React有什么特点? 它用于虚拟DOM,组件化设计模式,声明式代码,单向数据流,使用jsx描述信息等特点 3.什么是虚拟DOM? 用于构建虚拟的HTML的DOM 虚拟DOM可以看做是一棵模拟DOM树的js对象树。例如: var element = { element: 'ul', props: { id:"ulist" }, children: [ { element: 'li', props: { id:"first" }, children: ['这是第一个List元素'] }, { element: 'li', props: { id:"second" }, children: ['这是第二个List元素'] } ] } 4
  • React-从DOM元素获取组件进行调试(React - getting a component from a DOM element for debugging)
    问题 为了在控制台中进行调试,React中是否有任何机制可以使用DOM元素实例来获取支持的React组件? 先前已经在生产代码中使用此问题时询问过此问题。 但是,我的重点是用于调试目的的开发版本。 我熟悉React的Chrome调试扩展,但是并非在所有浏览器中都可用。 将DOM资源管理器和控制台结合使用,很容易使用“ $ 0”快捷方式来访问有关突出显示的DOM元素的信息。 我想在调试控制台中编写如下代码:getComponentFromElement($ 0).props 即使在React开发构建中,也没有机制可以使用元素的ReactId来获取组件吗? 回答1 我刚刚阅读了文档,并且afaik都没有一个外部公开的API可以让您直接进入并通过ID查找React组件。 但是,您可以更新初始的React.render()调用,并将返回值保留在某个位置,例如: window.searchRoot = React.render(React.createElement...... 然后,您可以引用searchRoot,并直接浏览它,或使用React.addons.TestUtils遍历它。 例如,这将为您提供所有组件: var componentsArray = React.addons.TestUtils.findAllInRenderedTree(window.searchRoot
  • 【React学习】JSX、生命周期、脚手架
    文章目录 1 React入门1.1 React基础认识1.2 React基本使用1.3 React JSX1.3.1 JSX1.3.2 虚拟DOM1.3.3 渲染虚拟 DOM(元素) 1.4 模块与组件、模块化与组件化的理解 2 React 面向组件编程2.1 自定义组件2.2 组件三大属性2.2.1 state2.2.2 props2.2.3 refs2.2.4 事件处理 2.3 功能界面的组件化编码流程2.4 收集表单数据2.5 组件生命周期2.5.1 生命周期流程图2.5.2 生命周期详述2.5.3 重要的勾子函数2.5.5 **新的生命周期** 2.6 虚拟 DOM 与 DOM Diff 算法 3 react 脚手架3.1 create-react-app3.2 创建项目并启动 参考 文章放置于:https://github.com/zgkaii/CS-Notes-Kz,欢迎批评指正! 1 React入门 1.1 React基础认识 React 是一个声明式,高效且灵活的用于构建用户界面的 JavaScript 库,由 Facebook 开源。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面,这些代码片段被称作“组件”。 传统的Web UI开发的主要问题——DOM API关注太多细节,应用程序状态分散在各处f难以追踪和维护。 而React的特点:
  • React简介、特点、组件(函数组件/类组件/复合组件/高阶组件HOC)、及创建项目
    1. React 简介 React 是一个用于构建用户界面的 javascript 库。React 主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。React 将界面分成了各个独立的小块,每一个块就是组件,这些组件之间可以组合、嵌套,就成了我们的页面。React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。 无论你现在正在使用什么技术栈,你都可以随时引入 React 来开发新特性,而不需要重写现有代码。React 还可以使用 Node 进行服务器渲染,或使用 React Native 开发原生移动应用。 2. React 高性能的体现 React高性能的原理: 在Web开发中我们总需要将变化的数据实时反应到UI上,这时就需要对DOM进行操作。而复杂或频繁的DOM操作通常是性能瓶颈产生的原因(如何进行高性能的复杂DOM操作通常是衡量一个前端开发人员技能的重要指标)。 虚拟DOM React为此引入了虚拟DOM(Virtual DOM)的机制:在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行,每当数据变化时,React都会重新构建整个DOM树
  • react语法
    一、库和框架 库:小而巧 优点:可以方便的很方便的从一个库切换到另一个库,但代码基本不变 框架:大而全 优点:框架提供了一整套的解决方案,所以,在项目中切换到另外的框架比较困难 二、react与vue对比 组件化方面: 1、什么叫模块化 是从代码角度进行分析;把一些可复用的代码,抽离为单个模块;便于项目的维护和开发 2、什么叫组件化 是从ui界面进行分析;把可复用的ui元素,抽离为单独的组件;便于项目的维护和开发 3、组件化好处 随着项目规模的增大,组件越来越多,方便把现有组件拼接成完整项目 4、vue如何实现组件化 通过.vue文件来创建对应的组件 1)template 结构 2)script 行为 3)style 样式 5、react如何实现组件化 react中有组件化的概念,但没有像vue中一样的模板文件 react中,一切都是以js来表现的 三、为什么学react 1)react设计很优秀,一切基于js并且实现了组件化开发思想 2)开发团队实例强悍,不必担心断更 3)社区强大,很多问题都能找到对应的解决方案 4)提供了无缝转到reactNative上的开发体验,拓展我们的技术能力,增强我们的核心竞争力 5)很多企业中,前端项目的技术选型采用的是react.js 四、react中几个核心概念 1、虚拟dom (virtual docuent object model) 1
  • React,如何从同一个组件访问我的渲染函数中的 DOM 元素(React, how to access the DOM element in my render function from the same component)
    问题 我想知道从同一组件访问渲染函数中的 DOM 元素的最佳实践是什么。 请注意,我将在页面上多次渲染此组件。 例如 var TodoItem = React.createClass({ ... render:function(){ function oneSecLater(){ setTimeout(function(){ //select the current className? this doesn't work, but it gives you an idea what I want. document.getElementsByClassName('name').style.backgroundColor = "red"; )}, 1000); } return( <div className='name'>{this.oneSecLater}</div> ) }) 回答1 在这里,不需要使用 setTimeout。 组件有生命周期方法,其中componentDidMount在渲染后被调用。 因此,您可以在方法中获取对 div 的引用。 var TodoItem = React.createClass({ ... componentDidMount: function () { if(this.myDiv) { this.myDiv.style
  • react Hook useRef
    useRef const refContainer = useRef(initialValue); useRef 返回一个可变的 ref 对象,其 .current 属性被初始化为传入的参数(initialValue)。返回的 ref 对象在组件的整个生命周期内保持不变。 一个常见的用例便是命令式地访问子组件: function TextInputWithFocusButton() { const inputEl = useRef(null); const onButtonClick = () => { // `current` 指向已挂载到 DOM 上的文本输入元素 inputEl.current.focus(); }; return ( <> <input ref={inputEl} type="text" /> <button onClick={onButtonClick}>Focus the input</button> </> ); } 本质上,useRef 就像是可以在其 .current 属性中保存一个可变值的“盒子”。 你应该熟悉 ref 这一种访问 DOM 的主要方式。如果你将 ref 对象以 <div ref={myRef} /> 形式传入组件,则无论该节点如何改变,React 都会将 ref 对象的 .current 属性设置为相应的 DOM 节点。 然而
  • 30道常见React基础面试题
    【前端面试题】30道常见React基础面试题(附答案) 当今最流行的框架非 React莫属。 React以其岀色的性能,颠覆了互联网的理念,简单的开发方式受到许多开发者的青睐。 因此,在 React中,虚拟DOM、组件的生命周期、组件的通信、组件的约束性,配合 Reflux、 Redux等框架的使用,基于 EMAScript6语法开发,以及 Webpack编译等都是读者要掌握的内容。 当然, React的三大特色(虚拟DOM、组件开发、多端适配)的具体实现,开发者也要有所了解。 1、当调用 setState的时候,发生了什么操作? 当调用 setState时, React做的第一件事是将传递给setState的对象合并到组件的当前状态,这将启动一个称为和解( reconciliation)的过程。 和解的最终目标是,根据这个新的状态以最有效的方式更新DOM。 为此, React将构建一个新的 React虚拟DOM树(可以将其视为页面DOM元素的对象表示方式)。 一旦有了这个DOM树,为了弄清DOM是如何响应新的状态而改变的, React会将这个新树与上一个虚拟DOM树比较。 这样做, React会知道发生的确切变化,并且通过了解发生的变化后,在绝对必要的情况下进行更新DOM,即可将因操作DOM而占用的空间最小化。 2、在 React中元素( element)和组件(
  • React 源码漂流(四)之 createRef
    引言 本篇从 React Refs 的使用场景、使用方式、注意事项,到 createRef 与 Hook useRef 的对比使用,最后以 React createRef 源码结束,剖析整个 React Refs,关于 React.forwardRef 会在下一篇文章深入探讨。 一、Refs React 的核心思想是每次对于界面 state 的改动,都会重新渲染整个Virtual DOM,然后新老的两个 Virtual DOM 树进行 diff(协调算法),对比出变化的地方,然后通过 render 渲染到实际的UI界面, 使用 Refs 为我们提供了一种绕过状态更新和重新渲染时访问元素的方法;这在某些用例中很有用,但不应该作为 props 和 state 的替代方法。 在项目开发中,如果我们可以使用 声明式 或 提升 state 所在的组件层级(状态提升) 的方法来更新组件,最好不要使用 refs。 使用场景 管理焦点(如文本选择)或处理表单数据: Refs 将管理文本框当前焦点选中,或文本框其它属性。 在大多数情况下,我们推荐使用受控组件来处理表单数据。在一个受控组件中,表单数据是由 React 组件来管理的,每个状态更新都编写数据处理函数。另一种替代方案是使用非受控组件,这时表单数据将交由 DOM 节点来处理。要编写一个非受控组件,就需要使用 Refs 来从 DOM
  • react
    React基础知识点 目标 能够说出React是什么能够说出React的特点能够掌握React的基本使用能够使用React脚手架 什么是React (★★★) React是一个用于构建用户界面的javaScript库,起源于facebook的内部项目,后续在13年开源了出来 特点 声明式 你只需要描述UI看起来是什么样式,就跟写HTML一样,React负责渲染UI 基于组件 组件时React最重要的内容,组件表示页面中的部分内容 学习一次,随处使用 使用React可以开发Web应用,使用React可以开发移动端,可以开发VR应用,可以结合react-native angular-ionic、vue-weex React基本使用 React的安装 npm i react react-dom react 包是核心,提供创建元素,组件等功能react-dom 包提供DOM相关功能 React的使用 引入react和react-dom的两个js文件 <script src="./node_modules/react/umd/react.development.js"></script> <script src="./node_modules/react-dom/umd/react-dom.development.js"></script> 创建React元素 // 创建元素节点 // 1
  • 九、深入学习ref、forward和useRef、useImperativeHandle
    要学习useRef和useImperativeHandle之前,我们得先学习和回顾一下再class组件中的refs。 一、什么是Refs? 官网是这么说的: ​ Refs 提供了一种方式,允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。 在react数据流中,props是父子组件交流的唯一方式。如果要修改一个子组件的状态,那么就需要使用新的props去重新渲染。但是,在某些情况下,我们需要在props数据流之外,强制去修改子组件。被修改的子组件可能是一个React组件的实例,也可能是DOM元素。React官方对于这两种情况都给出了解决办法。 ​ react对于在calss组件中创建一个ref有两种方式。16.3版本之前的回调函数ref与16.3版本之后的React.createRef()。 二、创建Ref 1、class组件之React.createRef() 这种方式是使用 React.createRef() 创建的ref,并通过 ref 属性附加到 React 元素。在构造组件时,通常将 Refs 分配给实例属性,以便可以在整个组件中引用它们。 class MyComponent extends React.Component { constructor(props) { super(props); this.myRef = React
  • React 目标 了解组件以及组件的封装
    React 目标 了解组件以及组件的封装 组件通信 children defaultProps React React.js 是一个帮助你构建页面 UI 的库。React.js 将帮助我们将界面分成了各个独立的小块,每一个块就是组件,这些组件之间可以组合、嵌套,就成了我们的页面。 一个组件的显示形态和行为有可能是由某些数据决定的。而数据是可能发生改变的,这时候组件的显示形态就会发生相应的改变。而 React.js 也提供了一种非常高效的方式帮助我们做到了数据和组件显示形态之间的同步。 React.js 不是一个框架,它只是一个库。它只提供 UI (view)层面的解决方案。在实际的项目当中,它并不能解决我们所有的问题,需要结合其它的库,例如 Redux、React-router 等来协助提供完整的解决方法。 模块化:从 代码 的角度,去分析问题,把我们编程时候的业务逻辑,分割到不同的模块中来进行开发,这样能够方便代码的重用; 组件化:从 UI 的角度,去分析问题,把一个页面,拆分为一些互不相干的小组件,随着我们项目的开发,我们手里的组件会越来越多,最后,我们如果要实现一个页面,可能直接把现有的组件拿过来进行拼接,就能快速得到一个完整的页面, 这样方便了UI元素的重用;组件是元素的集合体。 vue 组件化与 React组件化 1、Vue是如何实现组件化的:.vue 组件模板文件
  • React---面试题
    翻到OneNote乱七八糟的面试题截图,随手整理一下整了一天,手已软··· 有更好看的版面在此处!!!点我 !!! 什么是虚拟 DOM? 虚拟 DOM(VDOM)是真实 DOM 在内存中的表示,是 UI 的表示形式,同时和实际 DOM 同步。这是发生在渲染函数被调用和DOM 元素在屏幕上显示之间的过程,整个过程被称为调和。 为什么虚拟 DOM 会提高性能? 虚拟 DOM 相当于在 js 和真实 dom 中间加了一个缓存,利用 dom diff 算法避免了没有必要的 dom 操作,从而提高性能。 用 JavaScript 对象结构表示 DOM 树的结构,然后用这个树构建一个真正的 DOM 树,插到文档当中,当状态变更的时候,重新构造一颗新的对象树,然后用新的树和旧的树进行比较,记录两棵树的差异,把 2 所记录的差异应用到步骤 1 所构建的真正的 DOM 树上,视图就更新了。 react diff 原理? 把树形结构按层分解,只比较同级元素。把列表结构的每个单元添加唯一的 key 属性,方便比较。react 只会匹配相同的 class 名的 component。合并操作,调用 component 的 setState 方法的时候,react 将其标记到 dirty。到每一个事件循环结束,react 检查所有标记 dirty 的 component 重新绘制。选择性子树渲染
  • React基础知识(必看)
    文章目录 React1. 是什么?2. 谁开发的?3. 为什么要学?4. React的特点安装安装命令执行命令 JSX语法JSX产生的原因JSX的概述使用步骤嵌入JS表达式条件渲染列表渲染样式处理**行内样式 -style**类名 -className React组件介绍函数创建组件类创建组件抽离成单独的JS文件 React事件处理事件绑定事件对象有状态组件和无状态组件State和SetStatestate基本使用setState() 修改状态 事件绑定this指向箭头函数利用bind方法class的实例方法 表单处理受控组件多表单元素优化非受控组件 React组件进阶组件的props组件通讯的三种方式父组件传递数据给子组件子组件传递数据给父组件兄弟组件传递 评论功能(组件)Context完整代码演示: props校验 生命周期创建时(挂载阶段)更新时卸载时 render-props模式children代替render属性改造代码元素显示与隐藏 高阶组件setState()说明setState() 的两个作用 组件性能优化减轻state避免不必要的重新渲染判断组件本身是否需要重新渲染子组件中判断是否渲染 虚拟DOM和Diff算法虚拟DOMDiff算法 React路由基础常用组件说明RouterLinkRoute 默认路由编程式导航匹配模式模糊匹配模式精准匹配 React 1
  • 2020年Web前端面试题之React相关(最全,最详细)
    React相关 第一部分 1.React 中keys 的作用是什么? Keys 是React在操作列表中元素被修改,添加,或者删除的辅助标识.https://www.jianshu.com/p/5efa10d71051 2.调用setState 之后发生了什么? 当调用 setState 时,React会做的第一件事情是将传递给 setState 的对象合并到组件的当前状态。这将启动一个称为和解(reconciliation)的过程。和解(reconciliation)的最终目标是以最有效的方式,根据这个新的状态来更新UI。 为此,React将构建一个新的 React 元素树(您可以将其视为 UI 的对象表示)。一旦有了这个树,为了弄清 UI 如何响应新的状态而改变,React 会将这个新树与上一个元素树相比较( diff )。通过这样做, React 将会知道发生的确切变化,并且通过了解发生什么变化,只需在绝对必要的情况下进行更新即可最小化 UI 的占用空间。 3.react 生命周期函数 · 初始化阶段:getDefaultProps==> constructor ==> componentWillMount ==> render ==> componentDidMount· 运行中状态:componentWillReceiveProps=