🎶 Sym - 一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)平台

📕 思源笔记 - 一款桌面端笔记应用,支持 Windows、Mac 和 Linux

🎸 Solo - B3log 分布式社区的博客端节点,欢迎加入下一代社区网络

♏ Vditor - 一款浏览器端的 Markdown 编辑器

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


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

留下你的脚步