前言:

昨天刚看了插槽,以为可以解决我工作中遇到的问题,非常激动,我今天又仔细想了想,发现并不能解决。。。 不过还是记录一下插槽吧,加深印象,嗯,就酱。

插槽作用:

插槽即:ReactDOM.createPortal(child, container) ,由ReactDom提供的接口。 可以实现将子节点渲染到父组件DOM层次结构之外的DOM节点。

第一个参数(child)是任何可渲染的 React 子元素,例如一个元素,字符串或 片段(fragment)。第二个参数(container)则是一个 DOM 元素。

应用场景:

对于 portal 的一个典型用例是当父组件有 overflow: hidden 或 z-index 样式,但你需要子组件能够在视觉上 “跳出(break out)” 其容器。例如,对话框、hovercards以及提示框。所以一般react组件里的模态框,就是这样实现的~

特点:事件冒泡

事件冒泡和普通react子节点一样,是因为portal仍然存在于React tree中,而不用考虑其在真是DOM tree中的位置。嗯,这个特性很方便。

代码就上一些文档中的例子吧。。。

// These two containers are siblings in the DOM
const appRoot = document.getElementById('app-root');
const modalRoot = document.getElementById('modal-root'); // Let's create a Modal component that is an abstraction around
// the portal API.
class Modal extends React.Component {
constructor(props) {
super(props);
// Create a div that we'll render the modal into. Because each
// Modal component has its own element, we can render multiple
// modal components into the modal container.
this.el = document.createElement('div');
} componentDidMount() {
// Append the element into the DOM on mount. We'll render
// into the modal container element (see the HTML tab).
modalRoot.appendChild(this.el);
} componentWillUnmount() {
// Remove the element from the DOM when we unmount
modalRoot.removeChild(this.el);
} render() {
// Use a portal to render the children into the element
return ReactDOM.createPortal(
// Any valid React child: JSX, strings, arrays, etc.
this.props.children,
// A DOM element
this.el,
);
}
} // The Modal component is a normal React component, so we can
// render it wherever we like without needing to know that it's
// implemented with portals.
class App extends React.Component {
constructor(props) {
super(props);
this.state = {showModal: false}; this.handleShow = this.handleShow.bind(this);
this.handleHide = this.handleHide.bind(this);
} handleShow() {
this.setState({showModal: true});
} handleHide() {
this.setState({showModal: false});
} render() {
// Show a Modal on click.
// (In a real app, don't forget to use ARIA attributes
// for accessibility!)
const modal = this.state.showModal ? (
<Modal>
<div className="modal">
<div>
With a portal, we can render content into a different
part of the DOM, as if it were any other React child.
</div>
This is being rendered inside the #modal-container div.
<button onClick={this.handleHide}>Hide modal</button>
</div>
</Modal>
) : null; return (
<div className="app">
This div has overflow: hidden.
<button onClick={this.handleShow}>Show modal</button>
{modal}
</div>
);
}
} ReactDOM.render(<App />, appRoot);

可以看到官例: 先写了一个Modal组件,显示Modal的props.children,在新建的插槽中。

本文到这里就结束了!

最后随手 讲一下我为什么昨天觉得可以解决我的问题,

我遇到的问题是:有一个容器,设置了overflow属性;容器里面一个一个的li,也就是列表;每一条的列表后面都有一个icon,悬浮会显示一些额外信息。问题就是,由于外面设置了overflow,导致icon显示的信息,在靠近上下左右等位置  就就就显示不出来了!!!哎,心塞塞啊~~ 本来以为这个插槽可以解决,可是,问题又来了,我插入到overflow 容器外面后,我就无法定位每一条的后面icon的位置了。。。

呜呜呜。。。不忍了,哇哇哇!!!

react 插槽(Portals)的更多相关文章

  1. 学习React系列(七)——Fragments、Portals、Error Boundaries与WEB组件

    React.Fragment portals Error Boundaries WEB组件 React.Fragment 想象一个场景,想把td包装为组件添加到table中去,代码如下: class ...

  2. React高级指南

    高级指南 1.深入JSX: 从本质上讲,JSX 只是为 React.createElement(component, props, ...children) 函数提供的语法糖. 因为 JSX 被编译为 ...

  3. [React] react-interview-01

    1.render 函数中 return 如果没有使用()会有什么问题? 我们在使用 JSX 语法书写 react 代码时,babel 会将 JSX 语法编译成 js,同时会在每行自动添加分号(:),如 ...

  4. react portals 插槽 实现简易弹窗

    Portal 提供了一种将子节点渲染到存在于父节点以外的DOM节点的优秀方案: 尽管 portal 可以被放置在 DOM 树中的任何地方,但在任何其他方面,其行为和普通的 React 子节点行为一致. ...

  5. react portals

    来源:https://segmentfault.com/a/1190000011668286 Portals是react 16.3 提供的官方解决方案,使得组件可以脱离父组件层级挂载在DOM树的任何位 ...

  6. [React] Render Elements Outside the Current React Tree using Portals in React 16

    By default the React Component Tree directly maps to the DOM Tree. In some cases when you have UI el ...

  7. React——组件的生命周期函数

    每一个组件都有一些生命周期函数. 当组件实例被创建并且会插入到DOM中,下面这些函数会被调用 constructor componentWillMount render componentDidMou ...

  8. [译文]React v16(新特性)

    [译文]React v16(新特性) 查看原文内容 我们很高兴的宣布React v16.0发布了! 这个版本有很多长期被使用者期待的功能,包括: fragments (返回片段类型) error bo ...

  9. Vue与React两个框架的区别对比

    简单介绍 React--Facebook创建的JavaScript UI框架.它支撑着包括Instagram在内的大多数Facebook网站.React与当时流行的jQuery,Backbone.js ...

随机推荐

  1. JAVA 热文

    Java技术面试篇 Javase基础面试题(1) Javase基础面试题(2) Javase基础面试题(3) Javase基础面试题(4) Javase基础面试题(5) Javaweb面试题(6) J ...

  2. Openssl的证书操作

    先假设自己是一个CA,而且是一个root CA,Cliu8CA 生成一个CA的private key openssl genrsa -out caprivate.key 1024 当然可以跟密码 op ...

  3. 企业IT管理员IE11升级指南【13】—— 如何把IEMP迁移到GPP

    企业IT管理员IE11升级指南 系列: [1]—— Internet Explorer 11增强保护模式 (EPM) 介绍 [2]—— Internet Explorer 11 对Adobe Flas ...

  4. 搭建Windows故障转移群集

    标签:SQL SERVER/MSSQL SERVER/数据库/DBA/windows 概述 本章内容主要讲述搭建windows故障转移群集 环境: 域服务器:windows server 2008 R ...

  5. 用Vue2仿京东省市区三级联动效果

    三级联动,随着越来越多的审美,出现了很多种,好多公司都仿着淘宝的三级联动 ,好看时尚,so我们公司也一样……为了贴代码方便,我把写在data里面省市区的json独立了出来,下载贴进去即可用,链接如下 ...

  6. JNI实战(一):JNI HelloWorld

    使用最新Android Studio的Cmake,创建一个Native C++项目后,我们就可以看到JNI的Hello World的项目及示例代码了. JNI的项目代码,分为三层:Java层,C++层 ...

  7. [Swift]LeetCode728. 自除数 | Self Dividing Numbers

    A self-dividing number is a number that is divisible by every digit it contains. For example, 128 is ...

  8. 初步学习大数据——设置虚拟机固定ip地址

    1.打开本机的网络连接 2.右键以太网,打开属性. 3.右键VMnet8,打开属性.最多不能超过255,最少不能小于0.    0~255之间. 4.找到你要设置固定IP地址的虚拟机 ,选择上方的编辑 ...

  9. java.lang.AbstractMethodError: org.mybatis.spring.transaction.SpringManagedTransaction.getTimeout()Ljava/lang/Integer; 报错解决

    我的妈呀  真的是各种报错..... 这个问题    解决方法: https://www.cnblogs.com/beppezhang/p/6118661.html

  10. 我们为什么要搞长沙.NET技术社区?

    我们为什么要搞长沙.NET技术社区? 感谢大家的关注,请允许我冒昧的向大家汇报长沙.NET技术社区第一次交流会的会议进展情况. 活动过程汇报 2019年2月17日,继深圳,广州,西安,成都,苏州相继成 ...