React表格处理：将0值转为空字符串而非删除整行

直接在React组件中处理数值渲染是最优方案，原因如下：

• CSS只能从视觉上隐藏0值，但0的文本内容依然存在于DOM中，可能干扰屏幕阅读器或数据抓取
• 脚本处理可以直接控制渲染输出，只显示大于0的数值，逻辑更清晰，也更高效

具体实现步骤 #

1. 添加一个辅助函数，用来判断并转换数值：

const renderNonZeroValue = (value: number) => {
  return value > 0 ? value : '';
};

2. 在渲染表格单元格时，用这个函数包裹所有需要处理的数值字段：

修改后的组件代码：

import axios from "axios";
import { useEffect, useState } from "react";

const PRINTER_REST_API_URL = "http://localhost:8080/GetReport";

export type Printer = {
  address: string;
  black: number;
  blackCopies: number;
  blackPrints: number;
  colourCopies: number;
  colourPrints: number;
  cyan: number;
  k1: number;
  k2: number;
  location: string;
  magenta: number;
  name: string;
  serial: string;
  yellow: number;
};

// 新增辅助函数
const renderNonZeroValue = (value: number) => {
  return value > 0 ? value : '';
};

export function GetPrinters() {
  const [printers, setPrinters] = useState<Printer[] | null>();
  useEffect(() => {
    axios.get(PRINTER_REST_API_URL).then((response) => {
      setPrinters(response.data);
    });
  }, []);
  return (
    <>
      {printers
        ? printers.map((printer) => {
            return (
              <tr key={printer.address}>
                <td>{printer.location}</td>
                <td>
                  <a
                    href="//{printer.address}"
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    {printer.address}
                  </a>
                </td>
                <td>{printer.name}</td>
                <td>{printer.serial}</td>
                <td>{renderNonZeroValue(printer.black)}</td>
                <td>{renderNonZeroValue(printer.yellow)}</td>
                <td>{renderNonZeroValue(printer.magenta)}</td>
                <td>{renderNonZeroValue(printer.cyan)}</td>
                <td>{renderNonZeroValue(printer.k1)}</td>
                <td>{renderNonZeroValue(printer.k2)}</td>
                <td>{renderNonZeroValue(printer.blackPrints)}</td>
                <td>{renderNonZeroValue(printer.blackCopies)}</td>
              </tr>
            );
          })
        : null}
    </>
  );
}

注：原代码中href="//" + printer.address存在JSX语法问题，已修正为href="//{printer.address}"。

为什么不推荐用CSS？ #

如果尝试用CSS实现，需要基于文本内容选择元素，比如：

td:contains('0') {
  visibility: hidden;
}

但:contains选择器兼容性差，而且只是隐藏视觉效果，DOM中依然保留"0"文本，不如脚本处理直接彻底。

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