React Hooks показывает больше / меньше текста, как в разделе комментариев YouTube - PullRequest
Новая
       2

React Hooks показывает больше / меньше текста, как в разделе комментариев YouTube

0 голосов
/ 02 июля 2019

У меня есть некоторый массив комментариев, как в разделе комментариев на YouTube, и я не хочу, чтобы он показывал кнопку «меньше / больше» для длинного комментария. Я немного застрял на способ сделать это локально на элементе без полного рендеринга (перестройка блока) или каких-либо значений состояний. 

function commentsGenerate() {
    let block = comments.map((comment, i) => {
        let splitLength = 400
        let shortDesc = comment || '' // for null vals

        let shortened = false
        if (shortDesc.length > splitLength) shortened = true

        shortDesc = shortDesc.substring(0, splitLength)

        return (
          <div key={i}>
            <div>{`${shortDesc}${shortened ? '...' : ''}`}</div>
            {shortened && <Button onCLick={ () => {'how?'} >More</Button>}
          </div >
        )
      })


    setSectionBlock(block)
  }

1 Ответ

2 голосов
/ 02 июля 2019

Вы не можете / не должны делать такого рода вещи без использования состояния где-либо.В этом случае я предлагаю вам разделить код комментария и состояние на отдельный компонент, который может обрабатывать свое собственное расширенное состояние.Затем вы можете использовать состояние для настройки рендеринга и стиля вашего вывода: 

import React, { useState } from 'react'

// ... //

const Comment = ({comment:shortDesc = ''})=>{
    let splitLength = 400
    let shortened = false
    const [isExpanded, setIsExpanded] = useState(false)
    if (shortDesc.length > splitLength) shortened = true

    shortDesc = shortDesc.substring(0, splitLength)
    const handleToggle = ()=>{
        setIsExpanded(!isExpanded)
    }
    return (
      <div key={i}>
        {!isExpanded ? <div>{`${shortDesc}${shortened ? '...' : ''}`}</div> : null}
        {shortened && <Button onClick={handleToggle}>{isExpanded?'Less':'More'}</Button>}
      </div >
    )
  }

Используйте этот компонент в вашем отображении следующим образом: 

 let block = comments.map((comment, i) => <Comment comment={comment} key={i} /> )
...