반응의 div/paragraph 태그의 최대 글자 수

Question

내 단락이 250자를 넘은 후에 "read more"링크를 추가해야합니다. javascript를 사용하는 많은 해결책을 찾았지만 reactjs로는 할 수 없습니다. 어떤 형태로든 도움이 될 것입니다! 감사 예 : 텍스트 텍스트 텍스트 textText 텍스트 textText 텍스트 textText 텍스트 textText 텍스트 textText 텍스트 textText 텍스트 textText 텍스트 텍스트 ... 자세히 만약 내가 제대로 이해하고, 당신이 온라인으로 볼 수있는 것과 차이가 당신이 Read more을 보여주고 싶어하지 않는다는 것입니다

Answer 1

더 텍스트가 250 자 미만인 경우 버튼을 클릭하십시오.

그것은 당신이 이미 가지고있는 것을 공유 할 수 있다면 좋을하지만 단지의 경우, 여기에 프로토 타입 것 :

class LongText extends Component { 
    state = { showAll: false } 
    showMore =() => this.setState({showAll: true}); 
    showLess =() => this.setState({showAll: false}); 
    render() { 
     const {content, limit} = this.props; 
     const {showAll} = this.state; 
     if(content.length<=limit) { 
      // there is nothing more to show 
      return <div>{content}<div> 
     } 
     if(showAll) { 
      // We show the extended text and a link to reduce it 
      return <div> 
       {content} 
       <a onClick={this.showLess}>Read less</a> 
      </div> 
     } 
     // In the final case, we show a text with ellipsis and a `Read more` button 
     const toShow = content.substring(0,limit)+"..."; 
     return <div> 
      {toShow} 
      <span onClick={this.showMore}>Read more</a> 
     </div> 
    } 
} 

Answer 2

당신은 여전히 ​​Implementing a Read More link in React.js에서 해답을 사용하고 substr()으로 감소 된 텍스트를로드 할 수 있습니다 이 같은 방법

var component = React.createClass({ 
    getInitialState: function() { 
     return { 
      expanded: false, 
      myText: 'bla bla bla' 
     }; 
    }, 

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

    getMoreTextDiv = function() { 
     if (this.state.expanded) { 
      return myText; 
     } else { 
      return myText.substr(0, 250); 
     } 
    } 

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

Answer 3

는 다른 사람보다 더 간단하고 표현 예는 ES6를 사용하여 게시 :

// Outside component 
const MAX_LENGTH = 250; 

render() { 
    const { text } = this.props; 

    return (
    <div> 
     {text.length > MAX_LENGTH ? 
     (
      <div> 
      {`${text.substring(0, MAX_LENGTH)}...`}<a href="#">Read more</a> 
      </div> 
     ) : 
     <p>{text}</p> 
     } 
    </div> 
); 
} 

Here's a fiddle이 것을 보여줍니다.