是否有任何 React 组件可以像手风琴一样显示数据答案

【问题标题】：Is there any React component that can show data like accordion是否有任何 React 组件可以像手风琴一样显示数据
【发布时间】：2020-02-03 07:37:45
【问题描述】：

我想创建以下最初以折叠模式显示的 React 组件（显示较少的数据），如下所示：

组件折叠：

http://i.stack.imgur.com/oTv4R.png

单击箭头后，组件将展开到最大尺寸以显示完整数据，并且箭头方向如下图所示：

组件扩展：

https://i.stack.imgur.com/QSmkw.png

感谢任何帮助。

问候，

防御

【问题讨论】：

您好，StackOverflow 可以帮助您解决遇到的问题。这意味着您应该告诉我们您尝试过的、搜索过的内容以及您在哪里被阻止或在哪里失败。此时，我们将能够帮助您解决它。在这里，您的帖子清楚地解释了您想要什么，那太好了！但不是你做了什么！所以对于我们阅读这篇文章。就像您希望我们为您开发一样。这不是这样做的目的！ ;) 对于您的下一篇文章，请尝试更准确地说明您在开发中的位置以及您需要我们帮助的位置（可能还有一些代码示例）。干杯！

标签： reactjs

【解决方案1】：

如果您想探索Material UI，我建议您查看Controlled Accordion 组件。您可以简单地通过npm install @material-ui/core 开始使用。

如果不是这样，您可能希望从头开始创建它。为方便起见，请参阅 this pen 我创建（分叉）。

【讨论】：

【解决方案2】：

您可以使用以下逻辑：

// App.js

import React, {useState} from "react";
import "./styles.css";

export default function App() {

  const [open, setOpen] = useState(false);

  return (
    <div className="App">
      <div className={`wrapp ${open ? 'open' : ''}`}>
        <h1>text one</h1>
        <h1>text one</h1>
        <h1>text one</h1>
        <h1>text one</h1>
        <h1>text one</h1>
        <button onClick={() => setOpen(!open)}>open</button>
      </div>
    </div>
  );
}

style.css

// style.css

.App {
  font-family: sans-serif;
  text-align: center;
}

.wrapp{
  width: 300px;
  height: 200px;
  border: 1px solid red;
  text-align: center;
  overflow: hidden;
  position: relative;
}

.open{
  height: max-content;
}

button{
  position: absolute;
  bottom: 0;
}

【讨论】：