在 React.js 中实现阅读更多链接

Question

I am trying to implement a Read More link, which expands to show more text after a click. I am trying to do this the React way.

<!--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>
    );
  }

});

I am new to React. I am not sure how to handle everything inside the render method. How can I implement this functionality in pure React?

Answer 1

So basically you want to display an extra div depending on the state property 'expanded'.

You can create a component conditionally. If you don't want a component you can just return null. I would just have a small method like:

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;
        }
    }
});

and your render function should become:

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

Each time you call setState() you trigger render() using the new state.

If expanded is false you are going to return null as a component, which means basically, nothing. So nothing will be displayed.

When you click on your link it will update your state and the expanded value, so you will return a div as a component and it will be displayed.

I think a good start would be to read this . This is a really great article and explains how render basically works, and the link with state.

You should also make sure you understand this kind of small example http://jsfiddle.net/3d1jzhh2/1/ to see how state and render are linked with each other.

Answer 2

You can try the read-more-react library, link: 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} 
/>

Answer 3

Late answer once again, but maybe someone will need it.

So basically you just need one component that will receieve the text you want to display. Then you will use the useState hook that will set the value of text length - does it need to be short or long version displayed, and on the end one function that will toggle between short and long version of the text.

Code example:

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;

Answer 4

You're pretty much on the right track. As stated in the react docs here: https://facebook.github.io/react/tips/if-else-in-JSX.html

it's just using a classic if and a variable, like this:

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

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

Answer 5

I know I'm little late to answer this question but instead of using 2 strings why don't you do it by using just 1 string only.

check out this npm package https://www.npmjs.com/package/react-simple-read-more It'll solve the problem.

In case you are interested in code: https://github.com/oztek22/react-simple-read-more/blob/master/src/string-parser.jsx

Answer 6

That's the complete solution in React Js:

Call Component:

 <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}/>

Component:

 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;