ReactDom
今天工作中使用了这个,感觉很好用啊!
首先: 这个ReactDom是干嘛用的?
答:
react-dom
包提供了 DOM 特定的方法,可以在你的应用程序的顶层使用,如果你需要的话,也可以作为 React模型 之外的特殊操作DOM的接口。 但大多数组件应该不需要使用这个模块。
其次: 如何引用?
答:
如果你使用 ES6 与 npm ,你可以写 import ReactDOM from 'react-dom', 或者:
import { render, unmountComponentAtNode } from 'react-dom'
再问: 有哪些接口?可以干嘛?
答:
一共有五个接口,
render()
hydrate()
ReactDOM.render(element, container[, callback])
// 渲染一个 React 元素到由 container 提供的 DOM 中,并且返回组件的一个 引用(reference) (或者对于 无状态组件 返回 null )
unmountComponentAtNode()
ReactDOM.unmountComponentAtNode(container)
// 从 DOM 中移除已装载的 React 组件,并清除其事件处理程序和 state 。 如果在容器中没有挂载组件,调用此函数什么也不做。 如果组件被卸载,则返回 true ,如果没有要卸载的组件,则返回 false
findDOMNode() 不建议使用
ReactDOM.findDOMNode(component)
// 如果组件已经被装载到 DOM 中,这将返回相应的原生浏览器 DOM 元素。在大多数情况下,你可以绑定一个 ref 到 DOM 节点上,从而避免使用findDOMNode。
createPortal() 这个很有用处,啊啊啊!
ReactDOM.createPortal(child, container)
// 创建一个 插槽(portal) 。 插槽提供了一种方法,可以将子元素渲染到 DOM 组件层次结构之外的 DOM 节点中
实例: 背景,我希望在任意页面 点击一个按钮,都可以打开同一个模态框。那么我希望只写一个方法,其他按钮点击触发这个方法,这个方法会把模态框渲染。
上代码:
export const onpenRegistration = (props = {}) => {
const div = document.createElement('div') // create一个容器
const obj = { // 这个模态框还需要消失,也就是卸载,因此需要传unmountComponentAtNode()方法
removeContainDiv: () => {
unmountComponentAtNode(div)
document.body.removeChild(div)
}
}
const registration = React.createElement(Notification, { ...props, ...obj }) // 这个是使用creatElement()方法,create一个react element
render(registration, div) // render第一个参数是reactElement,第二个是容器,这一步实现了在这个div容器中渲染Notification元素
document.body.appendChild(div) // 将divappend到body中
}
Notification是一个普通的react元素:
class Register extends Component {
constructor (props) {
super(props)
this.state = {
show: true
}
}
render () {
const { show } = this.state
const { removeContainDiv } = this.props
return(
<div onclick={removeContainDiv}>hshshs</div>
)
}
}
现在就可以使用onpenRegistration方法了:
import { openIndicatorRegistration } from './indicatorRegistration' render(){
<button onClick={openIndicatorRegistration}>
打开注册模态框
</button>
}
任何地方都可以用哦。方便吧!开心脸
ReactDom的更多相关文章
- React.render和reactDom.render的区别
刚开始学习react.js.发现网上的资料,有些是写着react.render,有些写着reactDom.render.觉得很奇怪就查阅了一下资料.解释如下: 这个是react最新版api,也就是0. ...
- ReactDom.render和React.render的区别
这个是react最新版api,也就是0.14版本做出的改变.主要是为了使React能在更多的不同环境下更快.更容易构建.于是把react分成了react和react-dom两个部分.这样就为web版的 ...
- react-dom.js 源码
/** *以下这是 react-dom.js 的源代码 * ReactDOM v15.3.1 * * Copyright 2013-present, Facebook, Inc. * All righ ...
- Error! Failed to install react, react-dom, next, try again.
问题:用create-next-app创建应用报错,部分模块没有安装,react.react-dom.next等模块安装失败,如下图所示 操作环境: 系统:Ubuntu 16.04.4 LTS npm ...
- React入门介绍(1)-ReactDOM.render()等基础
React入门介绍-ReactDOM.render()等基础 首先,React是一个用于构建用户界面的Javascript库,但Peact并不是一套完整的MVC或MVVM的框架,它仅涵盖V-view视 ...
- React源码 ReactDOM.render
在 react 当中,主要创建更新的有三种方式 1.ReactDOM.render || hydrate 这两个api都是要把这个应用第一次渲染到我们页面上面,展现出来整个应用的样子的过程,这就是初 ...
- ReactDOM & DOM Elements
一.ReactDOM 1.1 render() ReactDOM.render(element,container,[callback]) 在container中渲染一个React元素,然后返回组件一 ...
- React16源码解读:揭秘ReactDOM.render
引言 在上一篇文章中我们通过create-react-app脚手架快速搭建了一个简单的示例,并基于该示例讲解了在类组件中React.Component和React.PureComponent背后的实现 ...
- React && ReactDOM
如果你是 React 的初学者,一定会对 React 和 ReactDOM 感到迷惑.为什么要分成两个包呢?害得我还要引入两次,说好的减轻开发人员负担呢,这丫的在搞什么飞机.带着这个疑问,我们一起来康 ...
随机推荐
- Dubbo 源码分析 - 集群容错之 Directory
1. 简介 前面文章分析了服务的导出与引用过程,从本篇文章开始,我将开始分析 Dubbo 集群容错方面的源码.这部分源码包含四个部分,分别是服务目录 Directory.服务路由 Router.集群 ...
- 巧用这19条MySQL优化,效率至少提高3倍
阅读本文大概需要 3.8 分钟. 作者丨喜欢拿铁的人 https://zhuanlan.zhihu.com/p/49888088 本文我们来谈谈项目中常用的MySQL优化方法,共19条,具体如下: 1 ...
- 微信小程序客服消息新增临时素材接口java实现
今天想在微信小程序的客服信息窗口里回复用户一个图片信息,发现还需要上传素材,但是微信文档的上传临时素材接口写的模模糊糊,无奈去百度,网上清一色的PHP实现方式,难道我穿越了?PHP已经把java给超越 ...
- ubuntu在终端下复制粘贴的2种方法
最近因为项目需要在ubuntu环境下开发(我是用的unbantu虚拟环境),经常要在终端下手动输入很长的文件路径,觉得很麻烦,就谷歌了2种方法如下 你可能会问,什么是ubuntu? 简单来说就是一个基 ...
- 比较empty()与 isset()d的区别
比较empty()与 isset()的区别 注意:empty()在PHP5.5之前只能检测变量 isset()只能检测变量 两者之间的联系:empty($var) 等价于 !isset($var)|| ...
- Group By Grouping Sets
Group by分组函数的自定义,与group by配合使用可更加灵活的对结果集进行分组,Grouping sets会对各个层级进行汇总,然后将各个层级的汇总值union all在一起,但却比单纯的g ...
- 说说React组件的State
说说React组件的State React的核心思想是组件化的思想,应用由组件搭建而成, 而组件中最重要的概念是State(状态). 正确定义State React把组件看成一个状态机.通过与用户的交 ...
- Xamarin.Android 制作搜索框
前段时间仿QQ做了一个搜索框样式,个人认为还不错,留在这里给大家做个参考,希望能帮助到有需要的人. 首先上截图(图1:项目中的样式,图2:demo样式): 不多说直接上代码: Main.axml &l ...
- FileSync文件同步更新工具
FileSync是一款文件同步更新工具,它提供了对一个或多个应用的文件进行管理和同步更并功能,基于MD5的文件对比方式可以使管理者轻易地发布需要更新应用文件.FileSync主要模块包括:服务端,CL ...
- salesforce零基础学习(九十二)使用Ant Migration Tool 实现Metadata迁移
我们在做项目时经常会使用changeset作为部署工具,但是某些场景使用changeset会比较难操作,比如当我们在sandbox将apex class更改名字想要部署到生产的org或者其他环境的or ...