将切换类添加到React中的div

Question

我想在这个例子中展开，我点击“show more”按钮，它滚动到div，我想向show more组件添加一个toggle类。

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