如何在反应引导中折叠卡片内的部分文本？

Question

我有一张这样的卡片：

<Card className="m-5 border-0 shadow" style={styles.card}>
  <Row>
    <Col>
      <Card.Img src={require("../assets/images/findingsPage/EnglishesOfTheWorld.jpg")} style={styles.cardImage} />
    </Col>
    <Col>
      <Card.Body>
      <Card.Title as="h1">Englishes of the World</Card.Title>
      <Card.Text as="h4" style={styles.cardText}>
        How do your grammar intuitions depend on when and where you learned English? Participants took a short grammar quiz, which we are using to understand how grammar differs in different parts of the English-speaking world (USA, Ireland, Australia, etc.). We are also investigating how grammar is different for people who learn English later in life: Do they make different mistakes if their first language is German as opposed to Japanese?
      </Card.Text>
      </Card.Body>
    </Col>
  </Row>
</Card>

如果文本长度超出卡片高度，我是否可以折叠部分文本，如下所示：https://mdbootstrap.com/plugins/jquery/extended-cards/

谢谢。

Answer 1

让我们从演示开始：https://codesandbox.io/s/cool-wright-u5old?file=/src/App.js

逻辑是这样的：

• 在已安装的组件上，使用 ref 来确定文本父级的高度是否大于您的限制
• 如果是这样，请将max-height（将达到）设置为限制并显示切换按钮
• 当用户点击该按钮时，max-height 在卡片的限制和最大可能高度之间切换。

之所以使用max-height，是因为过渡。 the only way 只做 css 的高度过渡。

为了方便，我把这个逻辑提取到了一个新的组件中，但是可以在原组件内部完成。

现在，到代码：

const MAX_POSSIBLE_HEIGHT = 500;

const ExpendableText = ({ maxHeight, children }) => {
  const ref = useRef();
  const [shouldShowExpand, setShouldShowExpand] = useState(false);
  const [expanded, setExpanded] = useState(true);

  useEffect(() => {
    if (ref.current.scrollHeight > maxHeight) {
      setShouldShowExpand(true);
      setExpanded(false);
    }
  }, [maxHeight]);

  return (
    <Card.Text as="h4" style={styles.cardText} ref={ref}>
      <div
        class="inner"
        style={{ maxHeight: expanded ? MAX_POSSIBLE_HEIGHT : maxHeight }}
      >
        {children}
      </div>
      {shouldShowExpand && (
        <button onClick={() => setExpanded(!expanded)}>Expand</button>
      )}
    </Card.Text>
  );
};

还有css部分

.inner {
  overflow: hidden;
  transition: max-height 0.2s ease;
}

最后，组件可以这样消费：

<ExpendableText maxHeight={95}>
  How do your grammar intuitions depend on when and where you
  learned English? Participants took a short grammar quiz, which
  we are using to understand how grammar differs in different
  parts of the English-speaking world (USA, Ireland, Australia,
  etc.). We are also investigating how grammar is different for
  people who learn English later in life: Do they make different
  mistakes if their first language is German as opposed to
  Japanese?
</ExpendableText>

• 我在解决方案中加入了高度过渡（因为我喜欢它）。如果不需要过渡，解决方案会短一些。
• 如果不需要计算高度，因为内容总是要剪切，解决方案会更容易。