javascript - 添加阅读更多按钮到字符串 html react

Question

我从 API 获取帖子，并以 HTML 字符串形式获取帖子内容，如果内容超过 1000 个字符，我需要显示“阅读更多”按钮。

这是文本示例。

我怎样才能做到这一点？

Answer 1

更新:添加代码片段来运行并添加支持处理 HTML 字符串。

像<SmartText text={'what ever'} length={30} />一样使用它。显示“查看更多”链接的长度受到限制。

const SmartText = ({ text, length = 20 }) => {
  const [showLess, setShowLess] = React.useState(true);

  if (text.length < length) {
    return <p>{text}</p>;
  }

  return (
    <div>
      <p
        dangerouslySetInnerHTML={{
          __html: showLess ? `${text.slice(0, length)}...` : text,
        }}
      ></p>
      <a
        style={{ color: "blue", cursor: "pointer" }}
        onClick={() => setShowLess(!showLess)}
      >
        &nbsp;View {showLess ? "More" : "Less"}
      </a>
    </div>
  );
};

const htmlText =
  "<a> Hello Lorem Ipsum is <strong> simply dummy </strong> text of the printing and </a> typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";

ReactDOM.render(<SmartText text={htmlText} />, document.getElementById("app"));

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<div id="app"></div>

如果内容只是文本(没有 HTML 字符串)

const SmartText = ({ text, length = 20 }) => {
  const [showLess, setShowLess] = React.useState(true);

  if (text.length < length) {
    return <p>{text}</p>;
  }

  return (
    <div>
      <p>{ showLess ? `${text.slice(0, length)}...` : text }</p>
      <a
        style={{ color: "blue", cursor: "pointer" }}
        onClick={() => setShowLess(!showLess)}
      >
        &nbsp;View {showLess ? "More" : "Less"}
      </a>
    </div>
  );
};

const text =
  "Lorem Ipsum is text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";

ReactDOM.render(<SmartText text={text} />, document.getElementById("app"));

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<div id="app"></div>