为什么使用Teleport新的特性呢？
因为有时候用组件来表示一切界面中发生的逻辑，不过有些特例处理起来比较麻烦，比如在某个组件渲染的时候，在某种条件下需要显示一个全局的对话框dialog或者是modal组件，弹出一个浮层让用户来完成一些确定和取消的操作。
一般的做法如下：
会造成的问题：（1）我们写一个这样的dialog组件那么在渲染的时候就会将dialog渲染产生的HTML存在在这上面，变成父子结构的形式，造成dialog组件被嵌套的非常深，对于对话框来说，从用户感知的角度应该是一个独立的组件，通常应该显示在屏幕的正中间，从dom结构上看，现在dialog被包裹在其他组件中，用css的position属性控制dialog的位置，就要从dialog往上一直到body没有其他position：relative时来干扰。这样就有点难为作为通用组件的dialog了，毕竟谁能管住所有组件不用position呢。( 2 )还有一点就是dialog的样式，被包在其他元素中，css样式容易造成混乱。
我们希望dialog渲染在顶层的另外的Dom节点上，这样它在结构上就不属于其他元素的子组件了，就不会造成互相干扰了。
这时候就可以引出teleport了，teleport就是建立一个传送门，teleport包裹的组件在表现层和其他组件没有任何差异，但是渲染的东西却像经过传送门一样出现在另外一个地方。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title
最低0.47元/天 解锁文章
832
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
