ReactJS+TypeScript点击按钮修改div类名与CSS属性方法咨询

React是状态驱动UI的，你只需要用一个状态变量控制展开状态即可，具体实现步骤如下：

1. 定义状态变量 #

在你的函数组件内部首先声明状态：

import { useState } from 'react';

// 组件内部代码
const [isExpanded, setIsExpanded] = useState<boolean>(false);

2. 编写点击事件处理函数 #

// 事件类型TS可自动推断，也可以主动标注增强类型校验
const handleExpand: React.MouseEventHandler<HTMLDivElement> = () => {
  setIsExpanded(true);
};

3. 修改JSX模板 #

你需要修改3处逻辑：动态绑定类名、条件隐藏按钮、给外层卡片类加动态类名

<section className="FlexContainer-text">
  <p>
    {tutorial.message ||
      tutorial.messages.map((n) => (
        <span>
          {/* 1. 动态给conseil-card-pack加展开类，绑定点击事件 */}
          <div 
            className={`conseil-card-pack ${isExpanded ? 'expanded' : ''}`} 
            onClick={handleExpand}
          >
            {n.message}
          </div>
          {/* 2. 未展开时才显示按钮 */}
          {!isExpanded && (
            <div className="more-button">
              <div className="more-button-text">
                Afficher tous les messages
              </div>
            </div>
          )}
        </span>
      ))}
  </p>
  <div className="conseil-card-title">
    Titre : {tutorial.title}
    {tutorial.isPack ? " Pack oui" : " Pack non"}
  </div>
</section>

<!-- 注意：你外层挂载conseil-card / conseil-cardactive类的标签也要加动态类，示例如下 -->
<div className={`conseil-card ${isExpanded ? 'expanded' : ''}`}>
  <!-- 把上面的section放在当前标签内部 -->
</div>

4. 补充CSS样式 #

在现有CSS末尾添加以下代码即可实现属性修改：

/* 移除两个卡片类的height限制 */
.conseil-card.expanded, .conseil-cardactive.expanded {
  height: auto;
}

/* 隐藏渐变效果 */
.conseil-card-pack.expanded::after {
  display: none;
}

内容的提问来源于stack exchange，提问作者Pouney Design