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

简介: React-其它内容-Portals 和 React-父子组件通讯-类组件
  • 默认情况下, 所有的组件都是渲染到 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;


最后


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

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

相关文章
|
19天前
|
前端开发 JavaScript 测试技术
React 分页组件 Pagination
本文介绍了如何在 React 中从零构建分页组件,涵盖基础概念、常见问题及解决方案。通过示例代码详细讲解了分页按钮的创建、分页按钮过多、初始加载慢、状态管理混乱等常见问题的解决方法,以及如何避免边界条件、性能优化和用户反馈等方面的易错点。旨在帮助开发者更好地理解和掌握 React 分页组件的开发技巧,提升应用的性能和用户体验。
55 0
|
2月前
|
前端开发 开发者
React 函数组件与类组件对比
【10月更文挑战第4天】本文详细比较了React中的函数组件与类组件。函数组件是一种简单的组件形式,以纯函数的形式返回JSX,易于理解与维护,适用于简单的UI逻辑。类组件则是基于ES6类实现的,需要重写`render`方法并能利用更多生命周期方法进行状态管理。文章通过示例代码展示了两者在状态管理与生命周期管理上的差异,并讨论了常见的问题如状态更新异步性与生命周期管理的复杂性,最后给出了相应的解决方法。通过学习,开发者可以根据具体需求选择合适的组件类型。
60 8
|
3月前
|
前端开发 JavaScript 网络架构
react对antd中Select组件二次封装
本文介绍了如何在React中对Ant Design(antd)的Select组件进行二次封装,包括创建MSelect组件、定义默认属性、渲染Select组件,并展示了如何使用Less进行样式定义和如何在项目中使用封装后的Select组件。
102 2
react对antd中Select组件二次封装
|
2月前
|
人工智能 自然语言处理 前端开发
SpringBoot + 通义千问 + 自定义React组件:支持EventStream数据解析的技术实践
【10月更文挑战第7天】在现代Web开发中,集成多种技术栈以实现复杂的功能需求已成为常态。本文将详细介绍如何使用SpringBoot作为后端框架,结合阿里巴巴的通义千问(一个强大的自然语言处理服务),并通过自定义React组件来支持服务器发送事件(SSE, Server-Sent Events)的EventStream数据解析。这一组合不仅能够实现高效的实时通信,还能利用AI技术提升用户体验。
190 2
|
24天前
|
移动开发 前端开发 API
React 拖拽组件 Drag & Drop
本文介绍了在 React 中实现拖拽功能的方法,包括使用原生 HTML5 Drag and Drop API 和第三方库 `react-dnd`。通过代码示例详细讲解了基本的拖拽实现、常见问题及易错点,帮助开发者更好地理解和应用拖拽功能。
59 9
|
18天前
|
前端开发 UED 开发者
React 分页组件 Pagination
本文介绍了如何在 React 中实现分页组件,从基础概念到常见问题及解决方案。分页组件用于将大量数据分成多个页面,提升用户体验。文章详细讲解了分页组件的基本结构、快速入门步骤、以及如何处理页面跳转不平滑、页码过多导致布局混乱、边界条件处理和数据加载延迟等问题。通过本文,读者可以全面了解并掌握 React 分页组件的开发技巧。
29 2
|
22天前
|
设计模式 前端开发 编译器
与普通组件相比,React 泛型组件有哪些优势?
与普通组件相比,React 泛型组件有哪些优势?
33 6
|
1月前
|
前端开发 JavaScript 安全
学习如何为 React 组件编写测试:
学习如何为 React 组件编写测试:
37 2
|
2月前
|
前端开发 JavaScript 测试技术
React 高阶组件 (HOC) 应用
【10月更文挑战第16天】高阶组件(HOC)是 React 中一种复用组件逻辑的方式,通过接受一个组件并返回新组件来实现。本文介绍了 HOC 的基础概念、核心功能和常见问题,包括静态方法丢失、ref 丢失、多个 HOC 组合和 props 冲突的解决方案,并提供了具体的 React 代码示例。通过本文,读者可以更好地理解和应用 HOC,提高代码的复用性和可维护性。
66 8
|
2月前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。