Reactjs 多行省略号 npm 插件问题

Question

我正在尝试使用此 https://www.npmjs.com/package/react-lines-ellipsis 组件，但它无法按预期工作，或者我无法理解此文档。它正在截断我的文本，但当我点击 'Read more' 时它不会扩展它，正如您在演示中看到的那样。 https://xiaody.github.io/react-lines-ellipsis/

这是我的代码，请任何人指出我遗漏的地方。谢谢 https://codesandbox.io/embed/stupefied-jennings-55u4y

Answer 1

确实文档不清楚。这个库只是隐藏了一个文本。它没有处理程序。你应该自己实现。

import React, { useState } from "react";
import LinesEllipsis from "react-lines-ellipsis";

function App() {
 const longText =
 "lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem 
   lorem loremlorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem 
    lorem lorem lorem lorem";
 const [isExpand, setExpand] = useState(false);
 return (
  <div className="App">
   {isExpand ? (
    <div>{longText}</div>
   ) : (
    <div onClick={() => setExpand(!isExpand)}>
      <LinesEllipsis text={longText} maxLine="1" ellipsis="... Read more" />
    </div>
  )}
</div>

); }

Reactjs 多行省略号 npm 插件问题

Reactjs multiline ellipsis npm plugin issue

ellipsis

reactjs