collapse react

在 React 中，"折叠"指的是根据某个条件来显示或隐藏内容。可以使用状态（state）来控制内容的显示与隐藏。

下面是一个简单的例子，展示了如何在 React 中实现折叠功能：

首先，在组件的状态中添加一个变量来控制折叠状态：

import React, { useState } from 'react';

function Collapse() {
  const [isCollapsed, setIsCollapsed] = useState(true);

  const toggleCollapse = () => {
    setIsCollapsed(!isCollapsed);
  };

  return (
    <div>
      <button onClick={toggleCollapse}>
        {isCollapsed ? '展开' : '折叠'}
      </button>
      {!isCollapsed && <div>折叠的内容</div>}
    </div>
  );
}

export default Collapse;

在上面的代码中，我们使用了 `useState` 钩子来创建一个名为 `isCollapsed` 的状态变量，并将其初始值设为 `true`。然后，我们定义了一个 `toggleCollapse` 方法，在点击按钮时切换折叠状态。

在组件的渲染部分，我们根据 `isCollapsed` 的值来决定是否渲染折叠的内容。通过使用逻辑与运算符 (`&&`) ，只有当 `isCollapsed` 的值为 `false` 时才会渲染 `<div>折叠的内容</div>`。

这样，当用户点击按钮时，折叠的内容将会显示或隐藏。

请注意，上述代码只是一个简单的示例，实际应用中可能会有更复杂的需求。你可以根据自己的具体情况进行调整和扩展。