React 30 秒速学:制作折叠面板组件

本文同时发布于掘金,地址:https://juejin.im/post/6844903849912696846

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

折叠面板组件

  • 使用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>
  );
}
本文收录于专栏
译自:30-seconds-of-react 项目,全篇中文翻译、学习,所有案例进行分析、注释、上线。