|
本帖最后由 周大胖子 于 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>
</>
)
}
|
|