React 30 秒速學：製做手風琴組件

本文譯自：30-seconds-of-react。React 30 秒速學：全篇中文翻譯、學習，地址：30-seconds-of-react-zh_CN-umi，全部案例進行分析、註釋、上線。

系列文章：

• React 30 秒速學：把數組數據渲染爲列表、表格
• React 30 秒速學：製做輸入框、密碼可見、滑塊組件、下拉選擇器、複選框組件
• React 30 秒速學：製做多行文本組件，限制字符數和單詞數
• React 30 秒速學： 實現可摺疊、無限層級的樹形組件
• React 30 秒速學：製做自動識別連接的文本組件
• React 30 秒速學：製做手風琴組件
• React 30 秒速學：製做輪播組件
• React 30 秒速學：製做摺疊面板組件
• React 30 秒速學：製做倒計時組件
• React 30 秒速學：製做文件拖放組件
• React 30 秒速學：製做模態框組件
• React 30 秒速學：製做星級評分組件
• React 30 秒速學：製做選項卡組件

手風琴組件

手風琴效果組件，包含多個可摺疊內容。

• 定義一個AccordionItem組件，將它傳遞給Accordion。並經過在props.children中識別函數的名稱來刪除AccordionItem所需的沒必要要的節點。
• 每一個AccordionItem組有一個<button>，用於經過props.handleClick回調更新Accordion和組件的內容，經過props.children向下傳遞，它的摺疊狀態由props.isCollapsed肯定。
• 在Accordion組件中，使用React.useState()鉤子將bindIndex狀態變量的值初始化爲props.defaultIndex。
• 在收集的節點上使用Array.prototype.map來渲染單個可摺疊的元素。
• 定義changeItem，它將在單擊AccordionItem的<button>時執行。 changeItem執行傳遞的回調，onItemClick並根據點擊的元素更新bindIndex。

AccordionItem 組件：

import React from "react";
function AccordionItem(props) {
  const style = {
    collapsed: {
      display: "none"
    },
    expanded: {
      display: "block"
    },
    buttonStyle: {
      display: "block",
      width: "100%"
    }
  };

  return (
    <div> {/* 按鈕，點擊傳入的 handleClick */} <button style={style.buttonStyle} onClick={() => props.handleClick()}> {props.label} </button> {/* 控制顯示、隱藏狀態 */} <div className="collapse-content" style={props.isCollapsed ? style.collapsed : style.expanded} aria-expanded={props.isCollapsed} > {/* 內容 */} {props.children} </div> </div>
  );
}
複製代碼

Accordion 組件：

function Accordion(props) {
  // 目前顯示的 index
  const [bindIndex, setBindIndex] = React.useState(props.defaultIndex);
  // 點擊即把 bindIndex 設置爲本身
  const changeItem = itemIndex => {
    if (typeof props.onItemClick === "function") props.onItemClick(itemIndex);
    if (itemIndex !== bindIndex) setBindIndex(itemIndex);
  };
  // 篩選出傳入的 AccordionItem 組件，忽略其餘
  const items = props.children.filter(
    // 組件名
    item => item.type.name === "AccordionItem"
  );

  return (
    <div className="wrapper"> {items.map(({ props }) => ( <AccordionItem isCollapsed={bindIndex === props.index} label={props.label} handleClick={() => changeItem(props.index)} children={props.children} /> ))} </div> ); } 複製代碼

例子

export default function() {
  return (
    <Accordion defaultIndex="1" onItemClick={console.log}> <AccordionItem label="A" index="1"> Lorem ipsum </AccordionItem> <AccordionItem label="B" index="2"> Dolor sit amet </AccordionItem> </Accordion>
  );
}
複製代碼

• 示例代碼
• 運行效果