React 16.0中的新特性——portal及其注意点
来源:互联网 发布:人工智能的危害英文 编辑:程序博客网 时间:2024/06/05 18:34
简要介绍:React16.0中发布了很多新特性,我们来看portal,React提供了一个顶级API—portal,用来将子节点渲染到父节点之外的dom节点
1.基本用法
(1)在React15.X版本中,我们只能讲子节点在父节点中渲染,基本用法如下:
render() { // React需要创建一个新的div来包含子节点 return ( <div> {this.props.children} </div> );}
但是如果需要将子节点插入到父节点之外的dom呢,React15.x及之前都没有提供这个功能的API。
(2)React16.0中的portal
render() { // React不需要创建一个新的div去包含子元素,直接将子元素渲染到另一个 //dom节点中 //这个dom节点可以是任何有效的dom节点,无论其所处于dom树中的哪个位置 return ReactDOM.createPortal( this.props.children, domNode, );}
- Portal中的dom节点必须是有效的节点
ReactDOM.createPortal函数的第二个参数,是被插入的dom节点,并且这个dom节点是有效的节点,而不能是通过ref获得并传递的virtual dom节点,举例来说:
class MyTestableClass extends React.Component{ constructor(){ super(); this.state={ sprop:'' } } render(){ return <div> <Left ref={(input)=>{this.left=input}}>我是左边的信息</Left> <Right sprop={this.state.sprop}>我是右边的信息</Right> </div> } componentDidMount(){ var left=this.left; var state=this.state; this.setState({ sprop:left }) }}ReactDom.render( <MyTestableClass/>,document.getElementById('app'))
在整个组件中,我们将ref获得的子节点Left,通过props传递给了子节点Right,然后在Right子节点中,通过:
class Right extends React.Component{ constructor(){ super(); } render(){ var props=this.props; if(this.props.sprop){ return <div className="right">{this.props.children}</div> }else{ return ReactDOM.createPortal( this.props.children, this.props.sprop ); } } componentWillReceiveProps(nextProp){ console.log(nextProp.sprop); }}
我们尝试将子节点插入到通过props传递过来的另一个节点this.props.sprop中,因为this.props.sprop并不是一个valid dom node,它是一个virtual dom node,因此会报错:
//Target container is not a DOM element.
3.通过Portals实现事件冒泡
虽然一个portal可以插入到任何一个存在dom树中,但是通过Portal节点插入到其他dom中的节点,跟其他的React普通的子节点表现相同。在父节点下,通过Portal插入的子节点也可以共享context。
对于事件冒泡,从Portal节点中触发的事件,可以在任何包含它的节点中冒泡,即使这个包含节点不是Portal节点的直接祖先元素,比如下面的HTML结构中:
<html> <body> <div id="app-root"></div> <div id="modal-root"></div> </body></html>
在上面的HTML结构中,通过Portal, 在“modal-root”中出发的事件,也可以冒泡到“app-root”中。
- React 16.0中的新特性——portal及其注意点
- React 16.0中的新特性——Error Boundaries及其注意点
- React 开发中的几个注意点
- FMDB总结及其中的一些注意点
- php中的类型转换及其注意点
- WebSphere Portal 6.1 的新特性:对 HTML 静态页面的支持及其优势
- iOS开发-iOS10新特性及开发者主要注意点
- React ES6新特性
- React ES6新特性
- React 16 新特性
- Portal新特性实战 - 在WebSphere Portal上应用WSRP
- Portal新特性实战 - 使用 Ajax 和 WebSphere Portal
- Portal新特性 - 实现AJAX风格的Portal
- 【ArcGIS 10.2新特性】Portal for ArcGIS新特性
- Portal新特性 - 令人兴奋的技术Mashup
- JFFS2 及其新特性
- iOS7开发中的新特性,开发者需要注意了
- 【React Native】ES6新特性
- ECSHOP的安全检测代码
- Recyclerview adapter.notify几个方法内存占用分析
- springboot微服务搭建(一):整合mybatis配置(第一种方式)
- 双十一,几何画板加入购物车了吗?
- 使用Thinkphp解决group和count一起使用的问题
- React 16.0中的新特性——portal及其注意点
- MaterialID 和 DrawCall
- linux dumpe2fs命令
- Google gflags 的使用
- 成为一名合格软件工程师的7点建议
- 搭建邮件服务器,过程非常简单
- jvm学习记录--07 性能监控操作系统篇
- 百度编辑器UEditor 简单使用
- gPROMS.ModelBuilder.v3.20流程模拟软件+sw6