没有更多推荐了，
不良信息举报
举报内容：
React将组件渲染到指定DOM节点
举报原因：
原文地址：
原因补充：
最多只允许输入30个字
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！众所周知React优点之一就是他的API特别简单。通过render 方法返回一个组件的基本结构，如同一个简单的函数，就可以得到一个可以复用的react组件。但是有时候还是会有些限制的，尤其是他的API中，不能控制组件所应该渲染到的DOM节点，这就让一些弹层组件很难控制。当父元素设置为overflow：hidden 的时候，问题就会出现了。
例如就像下面的这样：
我们实际期待的效果是这样的：
幸运的是，虽然不是很明显，但有一个相当优雅的方式来绕过这个问题。我们学到的第一个react函数是render 方法，他的函数签名是这样的:
ReactComponent render(
ReactElement element,
DOMElement container,
[function callback]
通常情况下我们使用该方法将整个应用渲染到一个DOM节点中。好消息是该方法并不仅仅局限于此。我们可以在一个组件中，使用ReactDom.render 方法将另一个组件渲染到一个指定的DOM 元素中。作为一个组件的render 方法，其必须是纯净的（例如：不能改变state或者与DOM交互）.所以我们需要在componentDidUpdate 或者 componentDidMount 中调用ReactDom.render 方法。
另外我们需要确保在父元素被卸载的时候，改组件也要被卸载掉.
整理下，我们得到下面的一个组件：
import React,{Component} from 'react';
import ReactDom from 'react-dom';
export default class RenderInBody extends Component{
constructor(p){
componentDidMount(){//新建一个div标签并塞进body
this.popup = document.createElement("div");
document.body.appendChild(this.popup);
this._renderLayer();
componentDidUpdate() {
this._renderLayer();
componentWillUnmount(){//在组件卸载的时候，保证弹层也被卸载掉
ReactDom.unmountComponentAtNode(this.popup);
document.body.removeChild(this.popup);
_renderLayer(){//将弹层渲染到body下的div标签
ReactDom.render(this.props.children, this.popup);
总结下就是：
在componentDidMount的时候手动向body内塞一个div标签，然后使用ReactDom.render 将组件渲染到这个div标签
当我们想把组件直接渲染到body上的时候，只需要在该组件的外面包一层RenderInBody 就可以了.
export default class Dialog extends Component{
&RenderInBody&i am a dialog render to body&/RenderInBody&
译者增加：
将以上组件改造一下，我们就可以向指定的dom节点中渲染和卸载组件，并加上位置控制，如下：
//此组件用于在body内渲染弹层
import React,{Component} from 'react'
import ReactDom from 'react-dom';
export default class RenderInBody extends Component{
constructor(p){
componentDidMount(){
popupInfo={
rootDom:***,//接收弹层组件的DOM节点，如document.body
left:***,//相对位置
top:***//位置信息
let {popupInfo} = this.
this.popup = document.createElement('div');
this.rootDom = popupInfo.rootD
this.rootDom.appendChild(this.popup);
//we can setAttribute of the div only in this way
this.popup.style.position='absolute';
this.popup.style.left=popupInfo.left+'px';
this.popup.style.top=popupInfo.top+'px';
this._renderLayer()
componentDidUpdate() {
this._renderLayer();
componentWillUnmount(){
this.rootDom.removeChild(this.popup);
_renderLayer(){
ReactDom.render(this.props.children, this.popup);
注：位置获取和根结点判断函数
export default (dom,classFilters)=& {
let left = dom.offsetLeft,
top = dom.offsetTop + dom.scrollTop,
current = dom.offsetParent,
rootDom = accessBodyElement(dom);//默认是body
while (current !=null ) {
left += current.offsetL
top += current.offsetT
current = current.offsetP
if (current && current.matches(classFilters)) {
return { left: left, top: top ,rootDom:rootDom};
1. dom:为响应弹层的dom节点，或者到该dom的位置后，可以做位置的微调，让弹层位置更佳合适
2. classFilters:需要接收弹层组件的DOM节点的筛选类名
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。【React进阶系列】从零开始手把手教你实现一个Virtual DOM（一）
假如你的项目使用了React，你知道怎么做性能优化吗？你知道为什么React让你写shouldComponentUpdate或者React.PureComponent吗？你知道为什么React让你写Immutable Data Structures吗？你知道为什么React让你在渲染列表时，一定要给每个子项加一个key吗？你知道为什么React让你在条件渲染时，不写if而写&&操作符或三元操作符吗？一切的答案都在Virtual DOM上！只要你跟着我完成了这个手写Virtual DOM的系列，上面的所有问题你都将得到解答，从此进入react高手的阵营！现在当我们谈virtual DOM (VDOM)的时候，通常会将React捆绑在一起谈。可实际上VDOM并不是React创造的，React将这个概念拿过来以后融会贯通慢慢地成为目前前端最炙手可热的框架之一。什么是VDOM？首先我们都知道什么是DOM(Document Object Model)，简单说就是将一个HTML文档抽象表达为树结构。VDOM则是将DOM再抽象一层生成的简化版js对象，这个对象也拥有DOM上的一些属性，比如id, class等，但它是完全脱离于浏览器而存在的。为什么要用VDOM？随着前端技术的发展，现在的网页应用变得越来越庞大，DOM树也随之变得复杂。当我们要修改DOM的某个元素时，我们需要先遍历找个这个元素，然后才修改能修改。而且如果我们大量地去修改DOM，每次DOM修改浏览器就得重绘（repaint）页面，有的时候甚至还得重排(reflow)页面，浏览器的重排重绘是很损耗性能的。React是怎么用VDOM解决这个问题的呢？首先，在React当我们要去修改数据的时候，我们会调用React提供的setState方法来修改数据；React根据新的数据生成一个新的VDOM，因为VDOM本质上只是一个普通的js对象，所以这个过程是很快的；然后React拿着新生成VDOM和之前的VDOM进行对比（diff算法），找出不同的地方(新增，删除，修改)，生成一个个的补丁（patches）;最后React把这些补丁一次性打到DOM上，完成视图的修改。原理其实还是很直观的，但React到底是怎么用代码实现的呢？其中最关键的一步是React是怎么diff的？如果搞清楚了内部的实现原理，对于我们使用React来写出性能更高的代码至关重要。所以今天我要手把手教大家怎么从零开始实现VDOM。我们的设计蓝图我们将采用跟React类似的方式使用JSX来编写组件；用Babel将JSX转化为纯js(类似hyperscript)；将hyperscript转化成我们的VDOM；将VDOM渲染到页面，形成真实的DOM；手动更新数据并手动触发更新视图操作(这部分是react做的，跟VDOM的实现无关，所以我们手动模拟一下)；重复步骤二和步骤三，得到新的VDOM；diff新VDOM和旧VDOM，得到需要修改真实DOM的patches；把patches一次性打到DOM上，只更新DOM上需要更改的地方。下面我们开始正式进入写代码环节，建议大家打开编辑器跟着我一步一步的敲代码。这样手把手教你敲代码的的博主你去哪里找？还不抓住这个千载难逢的机会？项目结构index.htmlindex.js(所有的逻辑都写在这个文件里).babelrc（babel的配置页）package.jsoncompiled.js (这个文件是babel打包自己生成的，不需要自己写)大家可以新建一个目录，然后新建1-4这四个文件
随时随地看视频react.js 获取真实的DOM节点实例(必看)
转载 &发布时间：日 08:20:33 & 投稿：jingxian
下面小编就为大家带来一篇react.js 获取真实的DOM节点实例(必看)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
为了获取真实的dom节点，文本输入框必须有一个 ref 属性，然后 this.refs.[refName] 就会返回这个真实的 DOM 节点。
var MyComponent = React.createClass({
handleClick: function() {
this.refs.myTextInput.focus();
render: function() {
&input type="text" ref="myTextInput" /&
&input type="button" value="Focus the text input" onClick={this.handleClick} /&
ReactDOM.render(
&MyComponent /&,
document.getElementById('example')
以上这篇react.js 获取真实的DOM节点实例(必看)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具reactjs 动态插入并渲染js组件? - 知乎7被浏览<strong class="NumberBoard-itemValue" title="分享邀请回答0添加评论分享收藏感谢收起0添加评论分享收藏感谢收起写回答