设计思路
弹窗类组件的要求弹窗内容在
A
处声明，却在
B
处展示。
react
中相 当于弹窗内容看起来被render
到⼀个组件⾥⾯去，实际改变的是⽹ ⻚上另⼀处的DOM
结构，这个显然不符合正常逻辑。但是通过使⽤ 框架提供的特定API
创建组件实例并指定挂载⽬标仍可完成任务。
// 常⻅⽤法如下：Dialog在当前组件声明，但是却在body中另⼀个div中显示
import React, {Component} from "react";
import Dialog from "../conponents/Dialog";
export default class DialogPage extends Component {
constructor(props) {
super(props);
this.state = {
showDialog: false
};
}
render() {
const {showDialog} = this.state;
return (
<div>
<h3>DialogPage</h3>
<button
onClick={() =>
this.setState({
showDialog: !showDialog
})
}>
toggle
</button>
{showDialog && <Dialog />}
</div>
);
}
}
具体实现
: Portal
传送⻔，
react v16
之后出现的
portal
可以实现内容传送功能。
具体范例：
// Diallog.js
import React, { Component } from "react";
import { createPortal } from "react-dom";
export default class Dialog extends Component {
constructor(props) {
super(props);
const doc = window.document;
this.node = doc.createElement("div");
doc.body.appendChild(this.node);
}
componentWillUnmount() {
window.document.body.removeChild(this.node);
}
render() {
const { hideDialog } = this.props;
return createPortal(
<div className="dialog">
{this.props.children}
{typeof hideDialog === "function" && (
<button onClick={hideDialog}>关掉弹窗
</button>
)}
</div>,
this.node,
);
}
}
1. Dialog
什么都不给⾃⼰画，
render
返回⼀个
null
就够了；
2.
它做得事情是通过调⽤
createPortal
把要画的东⻄画在
DOM 树上另⼀个⻆落。
原文：视频笔记
