reactjs - 如何在 Slatejs 中创建 Read_More 和 Read_less 按钮

Question

在此链接中，您可以找到 read_more/read_less 功能，但在 slatejs 中，我们无法直接访问文本。那么，如何以 slatejs 的方式在 saltejs 中创建该功能。我试图创建使用 ref

  const dots = React.useRef<any>();
  const moreText = React.useRef<any>();
  const btnText = React.useRef<any>();

然后我以这种方式实现

<span ref={dots}>...</span>
      <span ref={moreText}>
        <Editable
          readOnly={readOnly}
          renderElement={renderElement}
          renderLeaf={renderLeaf}
          placeholder="Enter some rich text…&quot;
          spellCheck
          autoFocus
          onKeyDown={onKeyDown}
        />
      </span>
      <button
        onClick={() => {
          if (dots.current.style.display === "none") {
            dots.current.style.display = "inline";
            btnText.current.innerHTML = "Read less";
            moreText.current.style.display = "inline";
          } else {
            dots.current.style.display = "none";
            btnText.current.innerHTML = "Read more";
            moreText.current.style.display = "none";
          }
        }}
        ref={btnText}
      >
        Read more
      </button>

但它隐藏了所有文本。但是，我想我需要像这样moreText.current.lenghth(300).appendSpan(span of ref={moreText})

Answer 1

这是工作应用程序：Stackblitz

import React, { useState } from "react";
import "./style.css";
const article = {
  title: "Read More Read Less Button",
  disc:
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta."
};

export default function App() {
  const [show, setShow] = useState(false);
  return (
    <div>
      <h1>{article.title}</h1>
      <p>{show ? article.disc : article.disc.substr(0, 100) + "..."}</p>
      <button onClick={() => setShow(!show)}>
        {!show ? "Read More" : "Read Less"}
      </button>
    </div>
  );
}

Answer 2

这将适用于 Slatejs 和其他任何地方。

export default function App() {
  const editorRef = React.useRef();

  return (
    <div>
 <p
        style={{
          overflow: "hidden",
          textOverflow: "ellipsis",
          display: "-webkit-box",
          WebkitLineClamp: 2,
          WebkitBoxOrient: "vertical"
        }}
        ref={editorRef}
      >
        {article.disc}
      </p>
      <button
        onClick={() => {
          editorRef.current.style.WebkitLineClamp =
            editorRef.current.style.WebkitLineClamp == false ? 2 : null;
        }}
      >
        toggle
      </button>
    </div>
  );
}

在堆栈闪电战上