30-seconds-of-react React 30 seconds learning: Full Chinese translation, learning, address: 30-seconds-of-react-zh_cn-umi, all cases with analysis, annotation, online.

Series of articles:

  • React 30 seconds: Render array data into lists and tables
  • React 30 Seconds learning: Make input fields, password visibility, slider components, drop-down selectors, check box components
  • React 30 seconds: Create multi-line text components that limit the number of characters and words
  • React 30 seconds Speed learning: Implement collapsible, infinite hierarchy tree components
  • React 30 Seconds: Make text components that automatically recognize links
  • React 30 Seconds To Learn: Make accordion components
  • React 30 Seconds Learning: Create a multicast component
  • React 30 Seconds Quick Learning: Make folding panel components
  • React 30 Seconds: Create a countdown component
  • React 30 seconds Quick Learning: Create file drag and drop components
  • React 30 Seconds Speed Learning: Make modal box components
  • React 30 Seconds Learning: Create a star rating component
  • React 30 Seconds Learning: Make TAB components

Accordion assembly

Accordion effect component, containing multiple collapsible contents.

  • To define aAccordionItemComponent to pass toAccordion. And through theprops.childrenTo identify the name of the function inAccordionItemUnnecessary nodes required.
  • eachAccordionItemThere’s one group<button>, used to passprops.handleClickThe callback to updateAccordionAnd component content throughprops.childrenIt passes down, its folded state byprops.isCollapsedSure.
  • inAccordionComponent, used byReact.useState()The hook will bebindIndexThe value of the state variable is initialized toprops.defaultIndex.
  • Used on the collected nodesArray.prototype.mapTo render a single collapsible element.
  • definechangeItem, it will clickAccordionItemthe<button>When the execution.changeItemExecute the passed callback,onItemClickAnd updates according to the element clickedbindIndex.

AccordionItem components:

import React from "react";
function AccordionItem(props) {
  const style = {
    collapsed: {
      display: "none"
    },
    expanded: {
      display: "block"
    },
    buttonStyle: {
      display: "block".width: "100%"}};return (
    <div>{/* button, click the incoming handleClick */}<button style={style.buttonStyle} onClick={()= > props.handleClick()}>
        {props.label}
      </button>{/* Control display and hide status */}<div
        className="collapse-content"
        style={props.isCollapsed ? style.collapsed : style.expanded}
        aria-expanded={props.isCollapsed}
      >{/* contents */} {props. Children}</div>
    </div>
  );
}
Copy the code

Accordion component:

function Accordion(props) {
  // The index currently displayed
  const [bindIndex, setBindIndex] = React.useState(props.defaultIndex);
  // Click to set bindIndex to itself
  const changeItem = itemIndex= > {
    if (typeof props.onItemClick === "function") props.onItemClick(itemIndex);
    if(itemIndex ! == bindIndex) setBindIndex(itemIndex); };// Filter out the AccordionItem component that is passed and ignore the rest
  const items = props.children.filter(
    / / component name
    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>
  );
}
Copy the code
example 
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>
  );
}
Copy the code
  • The sample code
  • Running effect