React手写一个手风琴组件示例

更新时间：2022年07月21日 17:32:14 作者：夕水

这篇文章主要为大家介绍了React手写一个手风琴组件示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

知识点

emotion语法
react语法
css语法
typescript类型语法

结构分析

根据上图，我们来分析一下，一个手风琴组件应该包含一个手风琴容器组件和多个手风琴子元素组件。因此，假设我们实现好了所有的逻辑，并写出使用demo，那么代码应该如下:

<Accordion defaultIndex="1" onItemClick={console.log}>
   <AccordionItem label="A" index="1">
     Lorem ipsum
   </AccordionItem>
   <AccordionItem label="B" index="2">
      Dolor sit amet
   </AccordionItem>
</Accordion>

根据以上的结构，我们可以得知，首先容器组件Accordion会暴露一个defaultIndex属性以及一个onItemClick事件。顾名思义，defaultIndex代表默认展开的子元素组件AccordionItem的索引，onItemClick代表点击每一个子元素组件所触发的事件。然后，我们可以看到子元素组件有label属性和index属性，很显然，label代表当前子元素的标题，index代表当前子元素组件的索引值，而我们的Lorem ipsum就是子元素的内容。根据这些分析，我们先来实现一下AccordionItem组件。

AccordionItem子组件

首先我们定义好子组件的结构，函数组件写法如下:

const AccordionItem = (props) =&gt; {
   //返回元素
};

子元素组件分成三个部分，一个容器元素，一个标题元素和一个内容元素，因此我们可以将结构写成如下:

<div className="according-item-container">
   <div className="according-item-header"></div>
   <div className="according-item-content"></div>
</div>

知道了结构之后，我们就知道props会有哪些属性，首先是索引index属性，它的类型为string 或者number，然后是判断内容是否展开的属性isCollapsed,它的类型是布尔值，其次我们还有渲染标题的属性label，它应该是一个react节点，类型为ReactNode，同理，还有一个内容属性即children,类型也应该是ReactNode,最后就是我们要暴露的事件方法handleClick,它的类型应该是一个方法，因此我们可以定义如下的接口:

interface AccordionItemType {
  index: string | number;
  label: string;
  isCollapsed: boolean;
  //SyntheticEvent代表react合成事件对象的类型
  handleClick(e: SyntheticEvent): void;
  children: ReactNode;
}

接口定义好之后，接下来我们就在接口里面拿值(采用对象解构的方式),这些值都算是可选的，即:

const { label, isCollapsed, handleClick, children } = props;

此时我们的AccordionItem子组件应该是如下:

const AccordionItem = (props: Partial<AccordionItemType>) => {
  const { label, isCollapsed, handleClick, children } = props;
  return (
    <div className={AccordionItemContainer} onClick={handleClick}>
      <div className={AccordionItemHeader}>{label}</div>
      <div
        aria-expanded={isCollapsed}
        className={`${AccordionItemContent}${
          isCollapsed ? ' collapsed' : ' expanded'
        }`}
      >
        {children}
      </div>
    </div>
  );
};

这里我们可以使用emotion/css来写css类名样式，代码如下:

const baseStyle = css`
  line-height: 1.5715;
`;
const AccordionItemContainer = css`
  border-bottom: 1px solid #d9d9d9;
`;
const AccordionItemHeader = cx(
  baseStyle,
  css`
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    padding: 12px 16px;
    color: rgba(0, 0, 0, 0.85);
    cursor: pointer;
    transition: all 0.3s, visibility 0s;
    box-sizing: border-box;
  `,
);
const AccordionItemContent = css`
  color: #000000d9;
  background-color: #fff;
  border-top: 1px solid #d9d9d9;
  transition: all 0.3s ease-in-out;
  padding: 16px;
  &.collapsed {
    display: none;
  }
  &.expanded {
    display: block;
  }
`;

以上的css后面跟模板字符串再跟css样式就是emotion/css语法，cx也就是组合样式写法，样式都是常规的写法，也没什么好说的。这里有一个难点，那就是display:none和display:block没有过渡效果，因此可以采用visibility:hidden和opacity:0的方式来替换，但是这里为了简单，没考虑动画效果，所以也就将问题放着，后面有时间再优化。

到目前为止，这个子组件就算是完成了，这也就意味着我们的手风琴组件已经完成一半了，接下来我们来看容器组件Accordion的写法。

Accordion容器组件

首先我们先把结构写好:

const Accordion = (props) =&gt; {
  //后续代码
};

我们再来分析一下需要传给Accordion组件的属性有哪些，很显然有defaultIndex,onItemClick和children，因此我们可以定义如下的接口:

interface AccordionType {
  defaultIndex: number | string;
  onItemClick(key: number | string): void;
  children: JSX.Element[];
}

注意这里的children不应该是ReactNode，而是JSX.Element元素数组，这是为什么呢，我们后面再来解释这个问题。现在我们知道了props的属性之后，我们可以拿到这些属性，代码如下:

const Accordion = (props:Partial<AccordionType>) => {
  const { defaultIndex, onItemClick, children } = props;
  //后续代码
};

现在我们再维护一个状态，用来代表当前显示的子元素组件的索引，使用useState hook函数，初始化默认值就应该是defaultIndex。如下:

const Accordion = (props:Partial&lt;AccordionType&gt;) =&gt; {
  const { defaultIndex, onItemClick, children } = props;
  //新增的代码
  const [bindIndex, setBindIndex] = useState(defaultIndex);
  //后续代码
};

接下来，我们编写好容器元素，并写好样式，如下所示:

const Accordion = (props: Partial<AccordionType>) => {
  const { defaultIndex, onItemClick, children } = props;
  const [bindIndex, setBindIndex] = useState(defaultIndex);
  return (
    <div className={AccordionContainer}></div>
  );
};

容器元素的样式如下:

const baseStyle = css`
  line-height: 1.5715;
`;
const AccordionContainer = cx(
  baseStyle,
  css`
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: #000000d9;
    font-size: 14px;
    background-color: #fafafa;
    border: 1px solid #d9d9d9;
    border-bottom: 0;
    border-radius: 2px;
  `,
);

好的，接下来，我们实际上容器元素的子元素应该是多个AccordionItem元素，也正因为如此，这里的children类型就是JSX.Element []，我们应该如何获取这些子元素呢？我们应该知道，每一个子元素对应的就是一个节点，在react中用的是链表来表示这些节点，每个节点对应的就有个type属性，我们只需要拿到容器元素的子组件元素中type属性为AccordionItem的元素数组，如下:

//name不是AccordionItem,代表子元素不是AccordionItem，不是的我们需要过滤掉
const items = children?.filter(
    (item) => item?.type?.name === 'AccordionItem,代表子元素不是AccordionItem，所以我们需要过滤掉',
 );

到了这里，我们就知道了，容器元素的子元素是一个数组，我们就需要遍历，使用map方法，如下:

items?.map(({ props: { index, label, children } }) => (
  <AccordionItem
     key={index}
     label={label}
     children={children}
     isCollapsed={bindIndex !== index}
     handleClick={() => changeItem(index)}
  />
))

请注意这一段代码:

handleClick={() => changeItem(index)}

这就是我们之前子组件绑定的事件，也是我们需要暴露出去的事件，在这个事件方法中，我们无非执行的就是更改当前被展开元素的索引。所以代码就很好写了:

const changeItem = (index: number | string) => {
   //暴露点击事件方法接口
   if (typeof onItemClick === 'function') {
     onItemClick(index);
   }
   //设置索引
   if (index !== bindIndex) {
     setBindIndex(index);
   }
};

到了这里，我们的一个手风琴组件就完成了，完整代码如下:

import { cx, css } from '@emotion/css';
import React, { useState } from 'react';
import type { ReactNode, SyntheticEvent } from 'react';
const baseStyle = css`
  line-height: 1.5715;
`;
const AccordionContainer = cx(
  baseStyle,
  css`
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: #000000d9;
    font-size: 14px;
    background-color: #fafafa;
    border: 1px solid #d9d9d9;
    border-bottom: 0;
    border-radius: 2px;
  `,
);
const AccordionItemContainer = css`
  border-bottom: 1px solid #d9d9d9;
`;
const AccordionItemHeader = cx(
  baseStyle,
  css`
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    padding: 12px 16px;
    color: rgba(0, 0, 0, 0.85);
    cursor: pointer;
    transition: all 0.3s, visibility 0s;
    box-sizing: border-box;
  `,
);
const AccordionItemContent = css`
  color: #000000d9;
  background-color: #fff;
  border-top: 1px solid #d9d9d9;
  transition: all 0.3s ease-in-out;
  padding: 16px;
  &.collapsed {
    display: none;
  }
  &.expanded {
    display: block;
  }
`;
interface AccordionItemType {
  index: string | number;
  label: string;
  isCollapsed: boolean;
  handleClick(e: SyntheticEvent): void;
  children: ReactNode;
}
interface AccordionType {
  defaultIndex: number | string;
  onItemClick(key: number | string): void;
  children: JSX.Element[];
}
const AccordionItem = (props: Partial<AccordionItemType>) => {
  const { label, isCollapsed, handleClick, children } = props;
  return (
    <div className={AccordionItemContainer} onClick={handleClick}>
      <div className={AccordionItemHeader}>{label}</div>
      <div
        aria-expanded={isCollapsed}
        className={`${AccordionItemContent}${
          isCollapsed ? ' collapsed' : ' expanded'
        }`}
      >
        {children}
      </div>
    </div>
  );
};
const Accordion = (props: Partial<AccordionType>) => {
  const { defaultIndex, onItemClick, children } = props;
  const [bindIndex, setBindIndex] = useState(defaultIndex);
  const changeItem = (index: number | string) => {
    if (typeof onItemClick === 'function') {
      onItemClick(index);
    }
    if (index !== bindIndex) {
      setBindIndex(index);
    }
  };
  const items = children?.filter(
    (item) => item?.type?.name === 'AccordionItem',
  );
  return (
    <div className={AccordionContainer}>
      {items?.map(({ props: { index, label, children } }) => (
        <AccordionItem
          key={index}
          label={label}
          children={children}
          isCollapsed={bindIndex !== index}
          handleClick={() => changeItem(index)}
        />
      ))}
    </div>
  );
};

让我们来看一下效果:

到此为止了，更多React组件的实现，可以访问react-code-segment。

源码地址 https://github.com/eveningwater/code-segment-react

以上就是React手写一个手风琴组件示例的详细内容，更多关于React手风琴组件的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

React报错解决之ref返回undefined或null
最近使用react做个滚动监听获取更多数据效果,当想获取dom时发现怎么也获取不到,下面这篇文章主要给大家介绍了关于React报错解决之ref返回undefined或null的相关资料,需要的朋友可以参考下
2022-08-08
React-Native中禁用Navigator手势返回的示例代码
本篇文章主要介绍了React-Native中禁用Navigator手势返回的示例代码，具有一定的参考价值，有兴趣的可以了解一下
2017-09-09
React Hook 父子组件相互调用函数方式
这篇文章主要介绍了React Hook 父子组件相互调用函数方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
React报错之Object is possibly null的问题及解决方法
这篇文章主要介绍了React报错之Object is possibly null的问题,造成 "Object is possibly null"的错误是因为useRef()钩子可以传递一个初始值作为参数，而我们传递null作为初始值，本文给大家分享详细解决方法，需要的朋友可以参考下
2022-07-07
采用React编写小程序的Remax框架的编译流程解析(推荐)
这篇文章主要介绍了采用React编写小程序的Remax框架的编译流程解析(推荐),本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-04-04
React中ES5与ES6写法的区别总结
这篇文章主要总结介绍了关于React中ES5与ES6的写法区别，文中介绍的非常详细，相信对大家具有一定的参考价值，需要的朋友们下面来一起看看吧。
2017-04-04
react如何实现侧边栏联动头部导航栏效果
这篇文章主要介绍了react如何实现侧边栏联动头部导航栏效果，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
React中的生命周期详解
这篇文章主要介绍了React中的生命周期，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
2022-09-09
使用 React 和 Threejs 创建一个VR全景项目的过程详解
这篇文章主要介绍了使用 React 和 Threejs 创建一个VR全景项目的过程详解,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-04-04
react-router-dom v6版本实现Tabs路由缓存切换功能
今天有人问我怎么实现React-Router-dom类似标签页缓存,很久以前用的是react-router v5那个比较容易实现,v6变化挺大,但了解react的机制和react-router的机制就容易了,本文介绍react-router-dom v6版本实现Tabs路由缓存切换,感兴趣的朋友一起看看吧
2023-10-10