如何在 ReactJS 中使用折叠组件？

在 ReactJS 中，我们经常需要使用折叠组件，以便在页面上显示大量内容时，隐藏不是立即需要的信息。本文将介绍如何使用 ReactJS 创建简单的折叠组件。

通过 Props 控制折叠/展开

最简单的折叠组件将接受一个 isOpen prop，用于控制组件是否展开。如果 isOpen 为 true，则显示组件的内容，否则隐藏。

import React from 'react';

const Collapsible = ({ isOpen }) => {
  return (
    <div className="collapsible">
      {isOpen && <div className="content">这是可折叠的内容</div>}
    </div>
  );
};

export default Collapsible;

添加切换按钮

接下来，我们可以添加一个按钮，用于切换折叠组件的开关状态。

import React, { useState } from 'react';

const Collapsible = ({ children }) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="collapsible">
      <button className="toggle" onClick={() => setIsOpen(!isOpen)}>
        {isOpen ? '隐藏' : '展开'}
      </button>
      {isOpen && <div className="content">{children}</div>}
    </div>
  );
};

export default Collapsible;

现在，当用户点击按钮时，折叠组件将切换到相反的状态，并显示或隐藏内容。

添加动画效果

添加动画效果可以提高用户体验，让折叠/展开过程更加平滑。

import React, { useState } from 'react';
import { CSSTransition } from 'react-transition-group';

const Collapsible = ({ children }) => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="collapsible">
      <button className="toggle" onClick={() => setIsOpen(!isOpen)}>
        {isOpen ? '隐藏' : '展开'}
      </button>
      <CSSTransition
        in={isOpen}
        timeout={300}
        classNames="content"
        unmountOnExit
      >
        <div className="content">{children}</div>
      </CSSTransition>
    </div>
  );
};

export default Collapsible;

在上面的代码中，我们使用了 React 的转换组件库 react-transition-group 中的 CSSTransition 组件来添加过渡效果。我们将 in prop 设置为 isOpen，以便在组件的状态更改时启动过渡。timeout prop 控制过渡的时间（以毫秒为单位）。classNames prop 设置动画效果的 CSS 类名。unmountOnExit prop 在动画结束时卸载组件，以便在组件不再可见时节省性能。

结论

现在，我们已经学会了如何使用 ReactJS 创建简单的折叠组件，并添加了切换按钮和动画效果。这样的组件可以大大提高用户体验并节省页面空间。