reactjs - 在 React 中将切换类添加到 div

Question

我想扩展这个例子，我点击“显示更多”按钮并滚动到 div，我想向显示更多组件添加一个切换类。

import React, { useRef } from 'react'

const Article = () => {
    const titleRef = useRef()

    function handClick() {

       // Add toggle class for show-more???

       titleRef.current.scrollIntoView({ behavior: 'smooth' })
    }

    return (
        <article>
            <button onClick={handClick}>Show more</button>
            <div className="show-more" ref={titleRef}>Some content to show onclick</div>
        </article>
    )
}

Answer 1

尝试:

import React, { useRef, useState } from 'react'

const Article = () => {
    const titleRef = useRef()
    
    const [showMore, setShowMore] = useState(false);

    function handClick() {

       setShowMore(!showMore);

       titleRef.current.scrollIntoView({ behavior: 'smooth' })
    }

    return (
        <article>
            <button onClick={handClick}>Show more</button>
            <div className=`show-more ${showMore ? 'showMoreClass' : ''}` ref={titleRef}>Some content to show onclick</div>
        </article>
    )
}