在React JS中点击tr时修改th背景色并解决相关TypeScript报错

问题原因 #

• TypeScript报错：document.getElementsByClassName 返回的元素是通用 Element 类型，该接口没有定义style属性，只有继承它的HTMLElement类型才具备样式相关属性，需要补充类型断言。
• 样式不生效：直接给style.backgroundColor赋值时不能携带!important后缀，DOM的style API不识别这种写法，要设置重要性优先级需使用setProperty方法。

方案1：修复现有原生DOM操作写法 #

修改attributeClicked函数如下：

function attributeClicked (i: number) {
    // 类型断言为HTMLElement解决TS报错
    const targetTh = document.getElementsByClassName(`a${i}`)[0] as HTMLElement;
    // 不需要!important时直接赋值
    // targetTh.style.backgroundColor = "red";
    // 需要!important优先级时使用setProperty方法
    targetTh.style.setProperty('background-color', 'red', 'important');
}

方案2：React声明式写法（更符合框架最佳实践） #

React不推荐直接操作DOM，建议通过状态控制样式，可完全规避DOM操作相关问题：

1. 先声明激活状态存储点击的索引

import { useState } from 'react';

// 组件内定义状态
const [activeIndex, setActiveIndex] = useState<number | null>(null);

function attributeClicked (i: number) {
    setActiveIndex(i);
}

2. 渲染时动态匹配状态设置样式

行内样式写法 #

props.params.map((item, i) => {
   return (
        <tr key={i} onClick={() => attributeClicked(i) } >            
               <th 
                   className={`a${i}`}
                   style={{ backgroundColor: activeIndex === i ? 'red' : 'transparent' }}
               >                    
                    <span>{ item.label }</span>                
               </th>
        </tr>
   )
})

类名控制写法（支持!important） #

先定义CSS样式：

.th-active {
  background-color: red !important;
}

渲染时动态拼接类名：

<th className={`a${i} ${activeIndex === i ? 'th-active' : ''}`}>
  <span>{ item.label }</span>                
</th>

内容的提问来源于stack exchange，提问作者Boidurja Talukdar