React 30 秒速学：制做手风琴组件

时间 2019-11-21

标签 react 制做手风琴组件栏目 React 繁體版

原文原文链接

本文译自：30-seconds-of-react。React 30 秒速学：全篇中文翻译、学习，地址：30-seconds-of-react-zh_CN-umi，全部案例进行分析、注释、上线。react

系列文章：git

手风琴组件

手风琴效果组件，包含多个可折叠内容。github

定义一个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 组件：app

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>
  );
}
复制代码