在 React.js 中实现 Read More 链接

Posted 2023-03-05

【中文标题】在 React.js 中实现 Read More 链接

【英文标题】：Implementing a Read More link in React.js

【发布时间】：2015-07-11 19:50:53

【问题描述】：

我正在尝试实现一个Read More 链接，该链接扩展为显示 点击后更多文字。我正在尝试以 React 的方式做到这一点。

<!--html-->
<div class="initialText">
  Lorem Ipsum is simply dummy 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. 
  <a>
    Read More
  </a>
</div>

<div class="fullText">
  Lorem Ipsum is simply dummy 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.
</div>

---

/* javascript */
/* @jsx DOM */
var component = React.createClass(

  getInitialState: function() 
    return 
      expanded: false
    ;
  ,

  expandedText: function() 
    this.setState(
      expanded: true
    );       
  ,

  render: function() 
    return (
      <div>

      </div>
    );
  

);

我是 React 新手。我不确定如何处理渲染方法中的所有内容。如何在纯 React 中实现此功能？

【参考方案1】：

所以基本上你想根据状态属性“扩展”显示一个额外的 div。

您可以有条件地创建组件。如果你不想要一个组件，你可以只返回 null。 我只会有一个小方法，例如：

var component = React.createClass(
    getInitialState: function() 
        return 
           expanded: false
       ;
    ,

    expandedText: function() 
        this.setState(
            expanded: true
        );       
    ,

    getMoreTextDiv: function() 
        if (this.state.expanded) 
          return <div> My extended content </div>;
         else 
          return null;
        
    
);

你的渲染函数应该变成：

render: function() 
     var expandedDiv = this.getMoreTextDiv();
     return (
         <div>
             <a onClick=this.expandedText>Read more</a>
              expandedDiv 
         </div>
     );

每次调用 setState() 时，都会使用新状态触发 render()。

如果expanded 为false，您将返回null 作为组件，这基本上意味着什么都没有。所以什么都不会显示。

当您点击链接时，它会更新您的状态和展开后的值，因此您将返回一个 div 作为组件并显示它。

我认为阅读this 是一个好的开始。 这是一篇非常棒的文章，它解释了渲染的基本工作原理，以及与状态的链接。

你还应该确保你理解这种小例子http://jsfiddle.net/3d1jzhh2/1/，看看状态和渲染是如何相互联系的。

【讨论】：

最好将getMoreTextDiv() 方法放在渲染方法中还是作为React.createClass( ) 的一部分？

该方法将在 createClass 中，但不在 render 方法中。您可以只使用 var expandDiv = (this.state.expanded) 吗？ 我的内容 : null;在渲染中。我编辑了答案。

@ng-hacker 有帮助吗？

哦，是的。我实现了它。谢谢。

【参考方案2】：

你可以试试 read-more-react 库，链接：https://www.npmjs.com/package/read-more-react

npm install --save read-more-react
import ReadMoreReact from 'read-more-react';


<ReadMoreReact 
        text=yourTextHere
        min=minimumLength
        ideal=idealLength
        max=maxLength 
/>

【参考方案3】：

您几乎走在正确的轨道上。如此处的反应文档中所述： https://facebook.github.io/react/tips/if-else-in-JSX.html

它只是使用一个经典的if 和一个变量，像这样：

render: function() 
    var expandedContent;
    if (this.state.expanded) 
        expandedContent = <div>some details</div>;
    

    return (
       <div>
           <div>Title or likewise</div>
           expandedContent
       </div>
    );

【讨论】：

我有同样的问题，但是我的内容是在“p”或“div”标签中。如果文本的高度超过 300 像素，我想显示“阅读更多”。在 jquery 中非常简单，但不知道如何在 react 中做到这一点？

【参考方案4】：

我知道我回答这个问题有点晚了，但你为什么不只使用 1 个字符串而不是使用 2 个字符串。

查看这个 npm 包https://www.npmjs.com/package/react-simple-read-more 它会解决问题。

如果您对代码感兴趣：https://github.com/oztek22/react-simple-read-more/blob/master/src/string-parser.jsx

【参考方案5】：

又一次迟到了，但也许有人会需要它。

所以基本上你只需要一个组件来接收你想要显示的文本。 然后，您将使用 useState 钩子来设置文本长度的值 - 是否需要显示短版本或长版本，以及最后一个可以切换的功能在文本的短版和长版之间。

代码示例：

import React,  useState  from 'react';

const ReadMore = (text) => 
  const [isReadMore, setIsReadMore] = useState(true);
  const toggleReadMore = () => setIsReadMore(!isReadMore);

  return (
    <p className='testimonials__quote__text'>
      isReadMore ? text.slice(0, 150): text 
      // condition that will render 'read more' only if the text.length is greated than 150 chars
      text.length > 150 &&
        <span onClick=toggleReadMore>
          isReadMore ? '...read more' : ' ...show less'
        </span>
      
    </p>
  )


export default ReadMore;

【参考方案6】：

这就是 React Js 中的完整解决方案：

调用组件：

<TeamCard description="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s." limit=150/>

组件：

const TeamCard = ( description, limit ) => 
  const [showAll, setShowAll] = useState(false);
  return (
    <p className="text-center text-white text-base pt-3 font-normal pb-5">
      description.length > limit ? (
        <div>
          showAll ? (
            <div>
              description
              <br />
              <button
                onClick=() => setShowAll(false)
                className="text-primary"
              >
                Read Less
              </button>
            </div>
          ) : (
            <div>
              description.substring(0, limit).concat("...")
              <br />
              <button onClick=() => setShowAll(true) className="text-primary">
                Read More
              </button>
            </div>
          )
        </div>
      ) : (
        description
      )
    </p>
  );
;
export default TeamCard;