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 秒速學：製做選項卡組件

摺疊面板組件

• 使用React.setState() hook 建立isCollapsed狀態變量，初始值爲props.collapsed。
• 使用一個對象style來保存單個組件及其狀態的樣式。
• 使用<div>來包裝改變組件的isCollapsed狀態的<button>和組件的內容，經過props.children傳遞。
• 根據isCollapsed肯定內容的外觀，並從style對象應用適當的CSS規則。
• 最後，根據isCollapsed更新aria-expanded屬性的值。

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 ? "顯示" : "隱藏"} 內容 </button> <div className="collapse-content" // 決定顯示和摺疊 style={isCollapsed ? style.collapsed : style.expanded} // aria-expanded 是給 Screen Reader 用來 判斷當前元素狀態的輔助屬性 aria-expanded={isCollapsed} > {props.children} </div> </div>
  );
}
複製代碼

例子

export default function() {
  return (
    <Collapse> <h1>This is a collapse</h1> <p>Hello world!</p> </Collapse>
  );
}
複製代碼

• 示例代碼
• 運行效果