反応中のdiv/paragraphタグの最大文字数

Question

私の段落が250文字に達した後に "read more"リンクを追加する必要があります.JavaScriptを使用している多くのソリューションが見つかりましたが、reactjsでできません。どのような形式のヘルプも素晴らしいでしょう！ 感謝 例： テキストテキストテキストTEXTTEXT TEXTTEXT TEXTTEXT TEXTTEXT TEXTTEXT TEXTTEXT TEXTTEXTテキスト...続きを読む

Answer 1

私が正しく理解していれば、あなたがオンラインで見ることができるものとの違いは、あなたがRead moreを表示したくないということですテキストが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これを実証しています。