反应中 div/段落标签中的最大字符数

Question

在我的段落达到 250 个字符后，我需要添加一个“阅读更多”链接。使用 javascript 获得了许多解决方案，但我无法使用 reactjs 来完成。任何形式的帮助都会很棒！ 谢谢 例子 ： 文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本...阅读更多

Answer 1

如果我理解正确，与您在网上看到的不同之处在于，如果文本少于 250 个字符，您不想显示 Read more 按钮。

如果你能分享你已经拥有的东西那就太好了，但以防万一，这里有一个原型：

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

编辑：带钩子

const {useState} = React;

const LongText = ({ content,limit}) => {
  const [showAll, setShowAll] = useState(false);

  const showMore = () => setShowAll(true);
  const showLess = () => setShowAll(false);

  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} 
      <button onClick={showLess}>Read less</button> 
    </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} 
    <button onClick={showMore}>Read more</button>
  </div>
}


const App = () => <div>
  <LongText content = "Short text" limit = {10}/> 
  <LongText content = "Very long text, very very long" limit = {10} /> 
</div>


ReactDOM.render( <App/>,document.getElementById('react'));

button {
  margin-left: 4px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Answer 2

一个使用 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 证明了这一点。

Answer 3

您仍然可以使用来自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>
        );
    }
});