如何在react中的表头行前后添加一条水平线？

在React中，在表头行的前后添加一条水平线可以通过CSS样式来实现。可以使用伪元素(::before和::after)来创建水平线，并将其添加到表头行的前后。

首先，在表头行的CSS样式中添加以下代码：

th::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #000;
  transform: translateY(-50%);
}

th::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 100%;
  height: 1px;
  background-color: #000;
  transform: translateY(-50%);
}

上述代码中，th::before和th::after分别表示在表头行的前后添加水平线。content: ""表示伪元素的内容为空。position: absolute将伪元素的定位方式设置为绝对定位。top: 50%将伪元素的顶部位置设置为表头行的中间位置。left: 0和right: 0分别将伪元素的左侧和右侧位置设置为表头行的左侧和右侧。width: 100%将伪元素的宽度设置为表头行的宽度。height: 1px将伪元素的高度设置为1像素。background-color: #000将伪元素的背景颜色设置为黑色。transform: translateY(-50%)将伪元素在垂直方向上向上偏移50%，使其居中显示。

然后，在React组件中的表头行元素上添加th样式类：

<thead>
  <tr>
    <th className="th">表头1</th>
    <th className="th">表头2</th>
    <th className="th">表头3</th>
  </tr>
</thead>

最后，在React组件的CSS样式中定义th样式类：

.th {
  position: relative;
}

上述代码中，position: relative将表头行的定位方式设置为相对定位，以便伪元素的绝对定位相对于表头行进行定位。

通过以上步骤，就可以在React中的表头行的前后添加一条水平线了。