React js - 三元添加 html 块到组件 - classNames 打破块

Question

我的目标是建立在切换点击按钮上出现和消失的评论部分。

我有以下结构：

设置按钮状态：

    const [showButton, toggleShowButton] = useState(false)

按钮：

<button className="comment-button" onClick={() => toggleShowButton(!showButton)}>{showButton ? "Hide comments" : "Show comments"}</button>

条件 html 块：

                {showButton &&
                    (
                        <div className="article-comment-section">
                            {article.comments && article.comments.map(x =>
                                <CommentCard key={x._id} {...x} />
                            )}

                            {isAuthenticated && <AddComment onCommentSubmit={onCommentSubmit} />}
                        </div>
                    )}

该块应该在单击按钮时出现和消失，但事实并非如此

我试着输入一个无效的类名，然后我的按钮起作用了。 但我还是想穿上我的造型

显然问题来自classNames。

我应该如何应用它们才能发挥作用？