React-其它内容-Portals 和 React-父子组件通讯-类组件

原创

杨不易呀

发布于 2023-09-30 14:40:02

1490

发布于 2023-09-30 14:40:02

文章被收录于专栏：杨不易呀

默认情况下, 所有的组件都是渲染到 root 元素中的
Portal 提供了一种将组件渲染到其它元素中的能力

Portals 是根据 ReactDOM 的 createPortal 所得到的，createPortal 接收两个参数：

第一个参数: 需要渲染的内容
第二个参数: 渲染到什么地方

还可以通过 this.props.children 获取到当前组件所有的子元素或者子组件：

App.js:

import React from 'react';
import ReactDOM from 'react-dom';

class Modal extends React.PureComponent {
    render() {
        return ReactDOM.createPortal(this.props.children, document.getElementById('other'));
    }
}

class App extends React.PureComponent {
    render() {
        return (
            <div id={'app'}>
                <Modal>
                    <div id={'modal'}>Modal</div>
                </Modal>
            </div>
        )
    }
}

export default App;

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="theme-color" content="#000000"/>
    <meta
            name="description"
            content="Web site created using create-react-app"
    />
    <title>React App</title>
</head>
<body>
<div id="root"></div>
<div id="other"></div>
</body>
</html>

官方文档：https://zh-hans.reactjs.org/docs/portals.html

父子组件通讯-类组件

本文是延续上一篇文章继续的

类组件的参数传递和函数式组件都是同一个世界同一个梦想的没有区别
类子组件接收参数相比有点不一样

首先将 Header.js 改造为类组件：

import React from 'react';
import './Header.css';

class Header extends React.Component {
    render() {
        return (
            <div className={'header'}>我是头部</div>
        )
    }
}

export default Header;

在类组件当中接收其实会自动将 props 对象传递给构造函数当中，然后在调用 super() 传递给父构造函数即可，不用再当前类当中在定义一个 props 去接收和保存了，以为父类当中已经有了 props 所以我们就无需在进行保存了。

Header.js：

import React from 'react';
import './Header.css';

class Header extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        console.log(this.props);
        return (
            <div className={'header'}>我是头部</div>
        )
    }
}

export default Header;

App.js:

import React from 'react';
import './App.css';
import Footer from "./components/Footer";
import Main from "./components/Main";
import Header from "./components/Header";

class App extends React.Component {
    render() {
        return (
            <div>
                <Header name={'yangbuyiya'} age={'18'}/>
                <Main/>
                <Footer/>
            </div>
        )
    }
}

export default App;

子组件设置参数默认值

类子组件与函数子组件设置默认值都是同一个梦想同一个世界的，参考之前的文章即可。

Header.js：

import React from 'react';
import './Header.css';

class Header extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        console.log(this.props);
        return (
            <div className={'header'}>我是头部</div>
        )
    }

    static defaultProps = {
        name: '小灰灰',
        age: 18
    }
}

export default Header;

App.js:

import React from 'react';
import './App.css';
import Footer from "./components/Footer";
import Main from "./components/Main";
import Header from "./components/Header";

class App extends React.Component {
    render() {
        return (
            <div>
                <Header/>
                <Main/>
                <Footer/>
            </div>
        )
    }
}

export default App;

子组件中校验参数类型

类子组件与函数子组件校验参数类型都是同一个梦想同一个世界的，参考之前的文章即可。

Header.js:

import React from 'react';
import './Header.css';
import ReactTypes from "prop-types";

class Header extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        console.log(this.props);
        return (
            <div className={'header'}>我是头部</div>
        )
    }

    static defaultProps = {
        name: '小灰灰',
        age: 18
    }

    static propTypes = {
        name: ReactTypes.string,
        age: ReactTypes.number
    }
}

export default Header;

最后

本期结束咱们下次再见👋~

🌊 关注我不迷路，如果本篇文章对你有所帮助，或者你有什么疑问，欢迎在评论区留言，我一般看到都会回复的。大家点赞支持一下哟~ 💗

我正在参与2023腾讯技术创作特训营第二期有奖征文，瓜分万元奖池和键盘手表

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

2023腾讯·技术创作特训营第二期

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

2023腾讯·技术创作特训营第二期

登录后参与评论

0 条评论

热度