揭秘「每日小需求」文本的展开收起功能实现：从省略到展开，一文读懂

2023-12-24 00:31:01

【前言】文本省略的必要性

在网页设计中，文本省略是一种常见的技巧，它可以帮助我们在有限的空间内展示更多内容，提高网页的可读性和美观性。例如，在产品列表页中，我们经常会看到商品名称被省略成一行或两行，以节省空间，让用户能够快速浏览更多商品。

【进阶】展开收起功能的实现

展开收起功能是文本省略的进阶版，它允许用户在需要时展开文本以查看全部内容。这在一些场景下非常有用，比如在新闻网站上，我们可能只对文章的标题感兴趣，而不想阅读全部内容。这时，展开收起功能就派上用场了，我们可以先点击标题查看摘要，如果感兴趣的话再点击“展开”按钮阅读全文。

【实现步骤】React中的展开收起功能

准备工作

首先，我们需要创建一个React组件来实现展开收起功能。这个组件可以是一个函数式组件，也可以是一个类组件。为了简单起见，我们这里使用函数式组件。

import React, { useState } from "react";

const ExpandableText = ({ text, maxLength }) => {
  const [isExpanded, setIsExpanded] = useState(false);

  const toggleExpansion = () => {
    setIsExpanded(!isExpanded);
  };

  return (
    <div>
      {isExpanded ? text : text.substring(0, maxLength) + "..."}
      <button onClick={toggleExpansion}>{isExpanded ? "收起" : "展开"}</button>
    </div>
  );
};

使用组件

接下来，我们需要在我们的React应用程序中使用这个组件。我们可以将组件放在任何需要文本省略和展开收起功能的地方。例如，在产品列表页中，我们可以将组件放在每个商品名称的旁边。

import React from "react";
import ExpandableText from "./ExpandableText";

const ProductList = () => {
  const products = [
    {
      id: 1,
      name: "iPhone 13 Pro Max",
      description: "The latest and greatest iPhone from Apple.",
    },
    {
      id: 2,
      name: "Samsung Galaxy S22 Ultra",
      description: "The most powerful Android phone on the market.",
    },
    // ...
  ];

  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>
          <ExpandableText text={product.name} maxLength={20} />
          <br />
          <ExpandableText text={product.description} maxLength={50} />
        </li>
      ))}
    </ul>
  );
};

export default ProductList;