React 30 秒速学：制做折叠面板组件

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

系列文章：git

折叠面板组件

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