论弹窗组件 Protals 【弹窗组件其实是我自己定义的】

周大胖子 · 发表于 2022-5-10 15:21:41

本帖最后由周大胖子于 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> */}
      {/* <Hdeder  name={'王三岁'}  age={29} /> */}
      {/* <Footer  name={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>
   </>
)
  }