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

第

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

目录知识点结构分析AccordionItem子组件Accordion容器组件

知识点

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

结构分析

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

AccordiondefaultIndex=1onItemClick={console.log}

AccordionItemlabel=Aindex=1

Loremipsum

/AccordionItem

AccordionItemlabel=Bindex=2

Dolorsitamet

/AccordionItem

/Accordion

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

AccordionItem子组件

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

constAccordionItem=(props)={

//返回元素

};

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

divclassName=according-item-container

divclassName=according-item-header/div

divclassName=according-item-content/div

/div

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

interfaceAccordionItemType{

index:string|number;

label:string;

isCollapsed:boolean;

//SyntheticEvent代表react合成事件对象的类型

handleClick(e:SyntheticEvent):void;

children:ReactNode;

}

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

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

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

constAccordionItem=(props:PartialAccordionItemType)={

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

return(

divclassName={AccordionItemContainer}handleClick}

divclassName={AccordionItemHeader}{label}/div

aria-expanded={isCollapsed}

className={`${AccordionItemContent}${

isCollapsedcollapsed:expanded

{children}

/div

/div

};

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

constbaseStyle=