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

Folding panel assembly

  • useReact.setState()Hook to createisCollapsedThe state variable, whose initial value isprops.collapsed.
  • Using an objectstyleTo hold styles for individual components and their states.
  • use<div>To wrap the change componentisCollapsedThe state of the<button>And component content throughprops.childrenPass.
  • According to theisCollapsedDetermine the appearance of the content, and fromstyleObjects apply the appropriate CSS rules.
  • Finally, according toisCollapsedupdatearia-expandedProperty value.
function Collapse(props) {
  const [isCollapsed, setIsCollapsed] = React.useState(props.collapsed);

  const style = {
    collapsed: {
      display: "none"
    },
    expanded: {
      display: "block"
    },
    buttonStyle: {
      display: "block".width: "100%"}};return (
    <div>
      <button
        style={style.buttonStyle}
        onClick={()= >setIsCollapsed(! isCollapsed)} > {isCollapsed ? "Show" : "hide "} content</button>
      <div
        className="collapse-content"// Decide to display and foldstyle={isCollapsed ? style.collapsed : style.expanded} / /aria-expandedIs to giveScreen ReaderAn auxiliary attribute used to determine the current state of the elementaria-expanded={isCollapsed}
      >
        {props.children}
      </div>
    </div>
  );
}
Copy the code
example 
export default function() {
  return (
    <Collapse>
      <h1>This is a collapse</h1>
      <p>Hello world!</p>
    </Collapse>
  );
}
Copy the code
  • The sample code
  • Running effect