论弹窗组件 Protals 【弹窗组件其实是我自己定义的】
本帖最后由 周大胖子 于 2022-5-10 16:04 编辑我个人在进行这章节学习的时候，发现这个玩意适合做弹窗；
比方说 在public/index.html 中 添加一个 <div id="other"></div>,那岂不是所有的弹窗组件 都可以通过这个组件当载体进行展示。
import React from "react";
import ReactDOM from 'react-dom';// 额最终还是引入的是这个，也不知道为啥
// import { ReactDOM } from "react";// 下面这个是系统提示生成的不能用
/**
*Protals:
*默认情况下，所有元素都会渲染到 root 元素中
*Protals提供了一种将元素渲染到其他元素中的能力
*
* createPortal()
* 接收两个参数，需要渲染的内容、渲染到什么地方
*
* this.props.children 可以获取倒当前组件所有的子组件
*/
class TestPortals extends React.PureComponent{
constructor(props){
super(props)
}
render(){
return ReactDOM.createPortal(this.props.children,document.getElementById("other"))
//这个other 被我添加在public/index.html 的文件中 ，如果没有这个元素 就会报错
// return (
// <section>
// 这事我的测试元素
// </section>
// )
}
}
export default TestPortals;
就这个类 随便哪个类 挂载的时候都可以选择展示出来 但是展示的位置会有点意外
class App extends React.Component{
constructor(){
super();
this.state={
name:'大力',
age:31
}
}
render(){
return (
<>
主页
{/* <Hdeder name={'王三岁'}age={'29'} ></Hdeder> */}
{/* <Hdedername={'王三岁'}age={29} /> */}
{/* <Footername={this.state.name}age={this.state.age} appfun={this.appfun.bind(this)} ></Footer> */}
{/* <Main></Main> */}
<hr />
{/* <ContextTemp></ContextTemp>
<hr />
<News></News>
<hr />
<Newdiff></Newdiff> */}
{/* <NewRef></NewRef>
<hr />
<TFrom></TFrom>
<hr /> */}
<Hoc></Hoc>
<hr />
<TestPortals>
<div>牛 哈哈哈 这个位置原来有问题 这是根据那个文件定位 所以即使写在 这里app.js，也会展示在页面最下方</div>
</TestPortals>
<NewFragment></NewFragment>
</>
)
}
页:
[1]