React中移除列表最后一项边框，解决querySelector获取元素为null问题

你猜测的问题原因是正确的，报错是因为代码执行时，对应类名的li元素还没有完成渲染挂载到DOM树上，document.querySelector 没有匹配到任何元素返回了null，对null访问style属性就抛出了对应错误。

• 方案1：纯CSS实现（最推荐）
  不需要写任何JS逻辑，直接在Employee.css中添加如下规则即可，CSS伪类会自动匹配最后一个列表项，不存在渲染时序问题，性能最优：

.employee-list-item:last-child {
  border: none;
}

如果要求只有列表长度达到指定规模才生效，可以配合:nth-last-child()伪类实现，比如列表长度≥3时才去掉最后一项的边框：

.employee-list-item:nth-last-child(n + 3):last-child {
  border: none;
}

• 方案2：React 声明式控制（适合有动态判断逻辑的场景）
  完全遵循React数据驱动视图的逻辑，不直接操作DOM，避免时序问题：

1. 在渲染Employee列表的父组件中，遍历列表时给最后一个符合条件的子组件传isLast标识：

// 父组件渲染逻辑示例，指定规模比如为3
{employeeList.map((item, index) => (
  <Employee
    key={item.id}
    name={item.name}
    title={item.title}
    isLast={index === employeeList.length - 1 && employeeList.length >= 3}
  />
))}

2. 修改Employee组件，根据isLastprops动态绑定样式类：

const Employee = (props) => {
  // 原有姓名处理逻辑保持不变
  const name = props.name
    .split(" ")
    .map((i) => i[0].toUpperCase() + i.slice(1))
    .join(" ");
  const { title } = props;

  return (
    <li className={`employee-list-item ${props.isLast ? 'no-border' : ''}`}>
      <Avatar name={props.name} />
      <span className="employee-name">{name}</span>
      <span className="employee-title">{title}</span>
    </li>
  )
}

3. 在Employee.css中添加无边框样式规则：

.no-border {
  border: none;
}

• 方案3：DOM操作适配（不推荐，仅做兼容参考）
  如果一定要使用原生DOM操作，需要把逻辑放到useEffect钩子中，等DOM渲染完成后执行，同时添加非空判断避免报错：
  在渲染列表的父组件中添加如下逻辑：

import { useEffect } from 'react'

const EmployeeList = () => {
  // 其他业务逻辑保持不变
  useEffect(() => {
    // 先判断列表长度是否达到指定规模
    if(employeeList.length >= 3) {
      const lastItem = document.querySelector('.employee-list-item:last-child')
      lastItem && (lastItem.style.border = 'none')
    }
  }, [employeeList.length]) // 依赖列表长度，每次列表变化重新执行
}

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