您可以在卡组件中添加新状态以控制要显示的内容。

const [showFullDescription, setFullDescription] = useState(false);

字符串
然后在你的按钮中，你可以在显示全文或不显示全文之间切换。

const showFullDescriptionHandler = () => {
    setFullDescription(!showFullDescription);
  };

const description = showFullDescription
    ? props.desc
    : props.desc.slice(0, 20);

<div className="col-md-7">
    <h2 className="featurette-heading">{props.title}</h2>
    <p className="lead">{description}</p>
    <button onClick={showFullDescriptionHandler}>
        Read {showFullDescription ? "Less" : "More"}
     </button>
</div>

型

这个功能就可以了

function truncateString(str, num) {
  // If the length of str is less than or equal to num
  // just return str--don't truncate it.
  if (str.length <= num) {
    return str
  }
  // Return str truncated with '...' concatenated to the end of str.
  return str.slice(0, num) + '...'
}

truncateString("A-tisket a-tasket A green and yellow basket", 8);

字符串
这是一篇文章的摘录[https：//medium.com/@DylanAttal/truncate-a-string-in-javascript-41f33171d5a8]（在Javascript中截断）

如果您希望组件接受HTML元素（作为react元素）而不仅仅是字符串，然后根据您指定的限制截断要显示的最终文本，则可以解析输入，访问元素的子元素，直到达到字符串，然后计算字符串中的字符数，在达到最大字符数后截断并停止该过程。
下面是一个执行此操作的组件示例：

import React from 'react';

type ParseResult = {
    content: React.ReactNode | React.ReactNode[];
    remaining: number;
};

type Parse = (root: ParseResult, parse: Parse) => ParseResult;

const parseString = (text: string, remaining: number): ParseResult => {
    if (!text?.length) {
        return { content: text, remaining };
    }

    const newText =
        remaining <= 0
            ? ''
            : text.length > remaining
            ? text.substring(0, remaining)
            : text;

    return { content: newText, remaining: remaining - text.length };
};

const parse: Parse = (root, parseCallback) => {
    const { content, remaining = 0 } = root;

    if (typeof content === 'string') {
        const result = parseString(content, remaining);
        return result;
    } else if (React.isValidElement(content)) {
        const children = (content.props as { children?: React.ReactNode })
            ?.children;

        if (children != null) {
            const innerResult = parseCallback(
                {
                    content: children,
                    remaining,
                },
                parseCallback,
            );
            const newContent = React.cloneElement(content, {}, innerResult.content);
            return { content: newContent, remaining: innerResult.remaining };
        }
    } else if (Array.isArray(content)) {
        const list: React.ReactNode[] = [];
        let newRemaining = remaining;

        for (const child of content) {
            const parsed = parseCallback(
                { content: child, remaining: newRemaining },
                parseCallback,
            );
            newRemaining = parsed.remaining;
            const newContent = (
                <React.Fragment key={list.length}>{parsed.content}</React.Fragment>
            );
            list.push(newContent);

            if (newRemaining < 0) {
                break;
            }
        }

        return { content: list, remaining: newRemaining };
    }

    return root;
};

export interface ReadMoreAdditionalProps {
    expanded?: boolean;
    showMore?: React.ReactNode;
    showLess?: React.ReactNode;
}

const ReadMoreInner: React.FC<
    {
        children: React.ReactNode;
        truncate: number;
    } & ReadMoreAdditionalProps
> = ({ truncate, expanded, showMore, showLess, children }) => {
    const root: ParseResult = {
        content: children,
        remaining: truncate,
    };
    const result = parse(root, parse);

    return (
        <>
            {expanded ? children : result.content}
            {result.remaining < 0 ? (expanded ? showLess : showMore) : undefined}
        </>
    );
};

export interface ReadMoreOptions extends ReadMoreAdditionalProps {
    truncate?: number;
}

export type ReadMoreProps = ReadMoreOptions & {
    children: React.ReactNode;
};

export const ReadMore: React.FC<ReadMoreProps> = ({
    truncate,
    children,
    ...props
}) => {
    return truncate != null ? (
        <ReadMoreInner {...props} truncate={truncate}>
            {children}
        </ReadMoreInner>
    ) : (
        <>{children}</>
    );
};

字符串
请记住，该组件要求子组件包含最终文本（或不包含文本）。它不会访问其他属性（如text或title属性），但这对于HTML组件应该是没问题的。
上面的组件本身不受HTML的约束，并且除了react之外不需要其他库，因此它也可以在react native中使用。
您可以在代码中包含此组件，添加按钮以显示更多或更少的文本，然后根据需要设置按钮的样式。
我创建了一个库来完成这个任务，如果您不想在项目中添加所有组件代码，我还创建了一个易于自定义的Web组件。
使用以下各项安装库：

npm install react-shorten

型
下面是如何使用该库的示例：

import { ReadMoreWeb } from 'react-shorten';
import React from 'react';

const StyledReadMore: React.FC<{
    truncate?: number;
    children: React.ReactNode;
}> = ({ truncate, children }) => (
    <ReadMoreWeb
        truncate={100}
        showMoreText="Show more"
        showLessText="Show less"
        className="read-more-btn"
    >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
        ullamcorper, odio eu aliquam ultricies, enim sapien aliquet arcu, quis
        aliquam diam massa eu nisl. Sed vitae nunc eget nunc ullamcorper
        aliquet. Sed euismod, nisl eget aliquam ultricies, justo nisl aliquet
        nunc, quis aliquam diam massa eu nisl. Sed vitae nunc eget nunc
        ullamcorper aliquet. Sed euismod, nisl eget aliquam ultricies, justo
        nisl aliquet nunc, quis aliquam diam massa eu nisl. Sed vitae nunc eget
        nunc ullamcorper aliquet.
    </ReadMoreWeb>
);

型
使用CSS：

.read-more-btn {
    display: inline;
    padding: 0;
    margin: 0;
    font-size: 1rem;
    color: rgb(80, 154, 223);
    background: none;
    border: none;
    cursor: pointer;
}

.link {
    color: rgb(26, 210, 243);
}

型
您可以看到here网络演示和here本地演示。“
如果不想安装其他库，也可以将这些演示用作参考，并将ReadMore和ReadMoreWeb组件直接包含在项目中。