将阅读更多按钮添加到字符串 html 反应

Posted 2023-02-21

【中文标题】将阅读更多按钮添加到字符串 html 反应

【英文标题】：Add read more button to string html react

【发布时间】：2020-05-15 21:23:55

【问题描述】：

我从 API 获取帖子，我将帖子内容作为字符串 html 获取，如果内容超过 1000 个字符，我需要显示阅读更多按钮。

这里是一个文本示例。

我该如何做到这一点？

【参考方案1】：

更新：添加代码 sn-p 运行并添加支持处理 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>

【讨论】：

感谢您的回答，但是如果您看到附加的图像，这将不起作用，您会看到我的文本不是纯文本是字符串化的 HTML，这意味着如果我使用您的解决方案，它将考虑HTML 标签和它的数据，如类和数据类型等，作为文本。

@MuhammedMushtaha，好的，我明白了。我认为您可以将上述组件稍微更改为“渲染 HTML 字符串”，例如 ***.com/questions/39758136/….

@MuhammedMushtaha，更新了答案以支持 HTML 字符串。

【参考方案2】：

你可以运行这段代码sn-p。

const fullText = "Living valley had silent eat merits esteem bed. In last an or went wise as left. Visited civilly am demesne so colonel he calling. So unreserved do interested increasing sentiments. Vanity day giving points within six not law. Few impression difficulty his use has comparison decisively. Not far stuff she think the jokes. Going as by do known noise he wrote round leave. Warmly put branch people narrow see. Winding its waiting yet parlors married own feeling. Marry fruit do spite jokes an times. Whether at it unknown warrant herself winding if. Him same none name sake had post love. An busy feel form hand am up help. Parties it brother amongst an fortune of. Twenty behind wicket why age now itself ten."

function showMore()
  document.getElementById('text-body').innerHTML =  fullText;
  document.getElementById('btn-show-less').style="display:block";
  document.getElementById('btn-show-more').style="display:none";


function showLess()
  document.getElementById('text-body').innerHTML = "partial text..." 
  document.getElementById('btn-show-more').style="display:block";
  document.getElementById('btn-show-less').style="display:none";

<div id="text-body">
  partial text...
</div>
<button id="btn-show-more" onClick='showMore()'>read more</button>
<button id="btn-show-less" style="display:none" onClick='showLess()'>show less</button>

【参考方案3】：

我希望这对你有用

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#more display: none;
</style>
</head>
<body>

<h2>Read More Read Less Button</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque 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.</span></p>
<button onclick="myFunction()" id="myBtn">Read more</button>

<script>
function myFunction() 
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");

  if (dots.style.display === "none") 
    dots.style.display = "inline";
    btnText.innerHTML = "Read more"; 
    moreText.style.display = "none";
   else 
    dots.style.display = "none";
    btnText.innerHTML = "Read less"; 
    moreText.style.display = "inline";
  

</script>

</body>
</html>