在 React TS 中的 div 上显示长字符串的短版本

Question

我正在开发一个 React 组件，它接收一个长字符串和一个数字变量作为 props。该组件的目标是根据指定的数字变量显示字符串的修剪版本。此外，它应该包括“显示更多”和“显示更少”按钮。

尽管尝试了各种方法，但没有一个被证明是成功的。当放置在具有定义的宽度和高度的 div 中时，原始单行字符串将变为多行。我的主要挑战出现在使用“useRef”钩子访问 textRef.current.innerHTML 时，它返回不带 ' 的原始字符串 ' 字符。

您对如何解决这个问题有什么建议吗？

Answer 1

我不知道你是如何实现它的，但这是我开发的“多读和少读”的一个工作示例。 我希望它有帮助

"use client"
import React, {useEffect, useState} from "react"
export function ReadMore({fullParagraph}: {fullParagraph: string}){
    const [text, setText] = useState<string>('');
    const [more, setmore] = useState<boolean>(true)
    useEffect(()=>{
        if(more){
            setText(fullParagraph.substring(0, 300))

        }else{
            setText(fullParagraph)
        }
    })
    const full = ()=>{
        setmore(false)
    }
    const less = ()=>{
        setmore(true)
    }
    return(
        <div className="">
            <p>
                {text} 
            {more?(
                <a className=" cursor-pointer" onClick={full}> Read More</a>
            ):(
                <a className=" cursor-pointer" onClick={less}> Read Less</a>
            )}

            </p>
            
        </div>
    )
}

Answer 2

按照@AdamBasha 的回答和这个视频，这是解决方案。请注意，主要的 css 属性 WebkitLineClamp 在反应代码中动态更改：

import React, { useEffect, useState } from "react";
import "./style.css"
export function ParagraphText({ text, lines }: { text: string; lines: number }) {
  const [showMore, setShowMore] = useState(true);
  const [textClass, setTextClass] = useState("show_trimmed_text");
  const dynamicStyle = {
    WebkitLineClamp: lines,
  };
  const handleShowButton = () => {
    if (showMore) {
      setShowMore(false);
      setTextClass("show_full_text");
    } else {
      setShowMore(true);
      setTextClass("show_trimmed_text");
    }
  };

  return (
    <div>
      <div className={textClass} style={dynamicStyle}>
        {text}
      </div>
          {showMore ? (
            <div onClick={handleShowButton}>Show More </div>
          ) : (
            <div onClick={handleShowButton}>Show Less </div>
          )}

    </div>
  );
}

和

.show_trimmed_text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.show_full_text {
    display: block;
}