React Visual - 折叠组件

2019-09-27

描述

渲染一个内容可折叠的组件。

• 使用 React.setState() hook 创建一个 isCollapsed 状态变量，其默认值为 props.collapsed
• 使用一个 style 对象分别为组件保存各自的样式和他们的状态
• 使用一个 <div> 将改变组件 isCollapsed 状态的 <button> 及通过 props.children 传递的内容的 <div> 进行包裹
• 基于 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 ? 'Show' : 'Hide'} content
      </button>
      <div
        className="collapse-content"
        style={isCollapsed ? style.collapsed : style.expanded}
        aria-expanded={isCollapsed}
      >
        {props.children}
      </div>
    </div>
  );
}

使用

ReactDOM.render(
  <Collapse>
    <h1>This is a collapse</h1>
    <p>Hello world!</p>
  </Collapse>,
  document.getElementById('root')
);

返回总目录

每天 30 秒系列之 React