React：显示更多/显示更少功能，仅当文本内容大于一定限制时显示按钮

【问题标题】：React: Show more/ Show less functionality, display button only when the text content is bigger than certain limitReact：显示更多/显示更少功能，仅当文本内容大于一定限制时显示按钮
【发布时间】：2020-10-13 19:27:35
【问题描述】：

我已经根据文本内容在 React 中实现了显示更多/显示更少的功能。如果文本超过 4 行，则单击显示更多按钮，应显示整个文本内容。但是，这里的问题是“显示更多”按钮始终可见（即使文本短于 4 行）我只希望该按钮在文本大于 4 行时可见。我在下面分享我的游乐场 -

https://codesandbox.io/s/happy-frost-bnzro?file=/src/App.js

我能否就如何根据行数有条件地呈现按钮提供一些线索？

【问题讨论】：

标签： css reactjs

【解决方案1】：

你可以在显示按钮的同时简单地加上 if 条件。

 <div>
    <h2 className={shown ? "" : "hide-content"}>
      It will be a long tetIt will be a long textIt will be a long tetIt
      will be a long textIt will be a long tetIt will be a long textIt will
      be a long tetIt will be a long textIt will be a long tetIt will be a
      long textIt will be a long tetIt will be a long textIt will be a long
      tetIt will be a long text
    </h2>
    {
      !shown ? <button onClick={() => setShown(!shown)}>Show More</button> : <button onClick={() => setShown(!shown)}>Show Less</button>
    }
 </div>

【讨论】：

抱歉，我的问题似乎不太清楚。此条件将更改按钮文本，显示更多或显示更少。我正在寻找以下场景的解决方案 - 让我们以文本很短并且可以容纳在前 4 行中的情况为例。在这种情况下，给按钮是没有意义的。