脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → react实现复合组件

详解react如何实现复合组件

 更新时间：2024年10月30日 08:49:45   作者：omijer  
在一些react项目开发中,常常会出现一些组合的情况出现,这篇文章主要为大家介绍了复合组件的具体实现,感兴趣的小伙伴可以跟随小编一起学习一下

需求点

在一些react项目开发中，常常会出现一些组合的情况出现，比如一个card组件中，可能有以下几个组合功能

  • Haeder组件
  • Content组件
  • Footer组件

用户需要在不同的环境下去使用card组件，可能不需要Header或者footer, 这种情况下，常见的条件渲染会使组件的逻辑变得复杂与难于组合，因此，复合组件的方式就是为了解决以上需求

具体实现

1.使用vite创建工程

npm init vite@latest

2.创建components文件夹，创建Card.tsx组件

import { PropsWithChildren } from "react";
import { CardProps } from "./type";
import "./card.css";

const Card = ({ children }: CardProps) => {

    return <div className="card">{children}</div>;

};


// card header

Card.Haeder = ({ children }: PropsWithChildren) => {

    return (
        <div className="header">
            <span>{children}</span>
        </div>
    );
};
 
// card content
Card.Content = ({ children }: PropsWithChildren) => {
    return <div className="content">{children}</div>;
};

// card footer
Card.Footer = ({ children }: PropsWithChildren) => {
    return <div className="footer">{children}</div>;
};

export default Card;

实现效果

1.在App组件中组合使用

import Card from "./components/Card";

function App() {
    return (
        <div className="app">
            <Card>
                <Card.Haeder>card标题</Card.Haeder>
                <Card.Content>neirong</Card.Content>
                <Card.Footer>
                    <div className="footer-btn">
                        <button>取消</button>
                        <button>确认</button>
                    </div>
                </Card.Footer>
            </Card>
        </div>
        );
 }

export default App;

2.组件效果

总结

利用了js函数是一个对象的特性，为主函数增加组合的属性，在组件使用的时候，可以方便的组合使用

使用了children props，可以方便使用者将任意的结构传入组件内部

可以继续扩展在复合组件内部使用context, 全局管理组件，可以管理组件内部的状态

到此这篇关于详解react如何实现复合组件的文章就介绍到这了,更多相关react实现复合组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • react ant Design手动设置表单的值操作

    react ant Design手动设置表单的值操作

    这篇文章主要介绍了react ant Design手动设置表单的值操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • React Native功能丰富的Toast通知库

    React Native功能丰富的Toast通知库

    这篇文章主要为大家介绍了React Native功能丰富的Toast通知库使用示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-10-10
  • react纯函数组件setState更新页面不刷新的解决

    react纯函数组件setState更新页面不刷新的解决

    在开发过程中，经常遇到组件数据无法更新，本文主要介绍了react纯函数组件setState更新页面不刷新的解决，感兴趣的可以了解一下
    2021-06-06
  • React中使用collections时key的重要性详解

    React中使用collections时key的重要性详解

    这篇文章主要给大家介绍了关于在React.js中使用collections时key的重要性，注意：一定不能不能忘了key，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面跟着小编来一起学习学习吧。
    2017-08-08
  • React组件通信浅析

    React组件通信浅析

    这篇文章主要介绍了React组件通信,在开发中组件通信是React中的一个重要的知识点，本文通过实例代码给大家讲解react中常用的父子、跨组件通信的方法，需要的朋友可以参考下
    2022-12-12
  • 详解React如何获取状态的旧值

    详解React如何获取状态的旧值

    最近刚开始接触 React,突然脑海出现一个问题,React中怎么在状态更新时获取它的旧值,特别是如果你之前用过 Vue,你可能会想知道 React 中有没有类似 Vue 的 watch 属性,那么react中怎么实现呢？本文就给大家介绍一下React如何获取状态的旧值,需要的朋友可以参考下
    2024-07-07
  • React commit源码分析详解

    React commit源码分析详解

    前两章讲到了，react 在 render 阶段的 completeUnitWork 执行完毕后，就执行 commitRoot 进入到了 commit 阶段，本章将讲解 commit 阶段执行过程源码
    2022-11-11
  • react项目中express动态路由未能匹配造成的404问题解决

    react项目中express动态路由未能匹配造成的404问题解决

    本文主要介绍了react项目中express动态路由未能匹配造成的404问题解决,解决了白屏的问题,具有一定的参考价值,感兴趣的可以了解一下
    2023-09-09
  • React-Native中一些常用组件的用法详解(二)

    React-Native中一些常用组件的用法详解(二)

    这篇文章主要跟大家介绍了关于React-Native中一些常用组件的用法的相关资料，其中详细介绍了关于ScrollView组件、ListView组件、Navigator组件、TableBarIOS组件以及网络请求等相关内容，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-06-06
  • React组件性能提升实现方法详解

    React组件性能提升实现方法详解

    这篇文章主要介绍了React组件性能最佳优化实践分享，React组件性能优化的核心是减少渲染真实DOM节点的频率，减少Virtual DOM比对的频率，更多相关内容需要的朋友可以参考一下
    2023-03-03

最新评论