使用 useState 实现 readmore 效果

readmore_useState.js

import React, { useState } from 'react'
import ReactDOM from 'react-dom'

const text = 'To see the answers, we need to take a step back. The goal of this article isn’t to give you a list of bullet point recipes. It’s to help you truly “grok” useEffect. There won’t be much to learn. In fact, we’ll spend most of our time unlearning.'

const RevealText = props => {
  const { text, maxLength } = props
  const [hidden, setHidden] = useState(true)

  if (text.length <= maxLength) {
    return (
      <span>{text}</span>
    )
  }

  return (
    <span>
      {hidden ? text.substring(0, maxLength) : text}
      {hidden ? (
        <a href="#" onClick={() => setHidden(false)}>...read more</a>
      ) : (
        <a href="#" onClick={() => setHidden(true)}>read less</a>
      )}
    </span>
  )
}


ReactDOM.render(<RevealText maxLength={32} text={text} />, document.querySelector('#root'))