React中非Input元素（如表格单元格）的内容掩码实现方案咨询

针对你遇到的非Input元素（如表格单元格内的span）的文本格式化需求，不需要依赖react-input-mask，可以通过以下几种方式实现：

一、纯JS函数手动格式化（无额外依赖） #

如果你的格式化规则固定（比如仅处理巴西手机号和CPF），直接写格式化函数是最轻量化的方案，无需引入任何工具包。

示例代码： #

// 格式化巴西手机号：5511912345678 → +55 (11) 9.1234-5678
const formatBrazilPhone = (phoneNumber) => {
  if (!phoneNumber) return '';
  const cleaned = phoneNumber.replace(/\D/g, '');
  const match = cleaned.match(/^(\d{2})(\d{2})(\d{1})(\d{4})(\d{4})$/);
  if (match) {
    return `+${match[1]} (${match[2]}) ${match[3]}.${match[4]}-${match[5]}`;
  }
  return phoneNumber;
};

// 格式化巴西CPF：12345678900 → 123.456.789-00
const formatCPF = (cpf) => {
  if (!cpf) return '';
  const cleaned = cpf.replace(/\D/g, '');
  const match = cleaned.match(/^(\d{3})(\d{3})(\d{3})(\d{2})$/);
  if (match) {
    return `${match[1]}.${match[2]}.${match[3]}-${match[4]}`;
  }
  return cpf;
};

在MUI表格中使用： #

import { Table, TableBody, TableCell, TableRow } from '@mui/material';

// 假设后端返回的数据
const data = [
  { id: 1, phone: '5511912345678', cpf: '12345678900' },
  { id: 2, phone: '5521987654321', cpf: '98765432100' },
];

export default function AdminTable() {
  return (
    <Table>
      <TableBody>
        {data.map((row) => (
          <TableRow key={row.id}>
            <TableCell>{formatBrazilPhone(row.phone)}</TableCell>
            <TableCell>{formatCPF(row.cpf)}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}

二、使用专业格式化库（适合复杂场景） #

如果需要支持更多国家的号码、或者格式化规则可能变动，推荐用成熟的工具包：

1. 处理电话号码：libphonenumber-js #

这个库是Google libphonenumber的纯JS实现，支持国际号码解析、格式化，专业性强。

安装：

npm install libphonenumber-js

使用示例：

import { parsePhoneNumberFromString } from 'libphonenumber-js';

const formatInternationalPhone = (phoneNumber) => {
  if (!phoneNumber) return '';
  try {
    const phone = parsePhoneNumberFromString(phoneNumber, 'BR'); // 指定巴西为默认地区
    // 自定义格式匹配需求：+55 (11) 9.1234-5678
    return phone.format('+CC (DD) N.NNNN-NNNN');
  } catch (e) {
    return phoneNumber;
  }
};

2. 处理证件号：cpf-cnpj-validator #

专门用于巴西CPF/CNPJ的验证和格式化，比手动函数更可靠。

安装：

npm install cpf-cnpj-validator

使用示例：

import { cpf } from 'cpf-cnpj-validator';

const formatCPFWithLib = (cpfNumber) => {
  if (!cpfNumber) return '';
  return cpf.format(cpfNumber); // 自动格式化为123.456.789-00
};

三、封装可复用组件（MUI场景优化） #

为了更方便在MUI组件中使用，可以封装一个通用的MaskedText组件：

import { Typography } from '@mui/material';

const MaskedText = ({ value, type }) => {
  let formattedValue = value;

  switch (type) {
    case 'brazil-phone':
      formattedValue = formatBrazilPhone(value);
      break;
    case 'cpf':
      formattedValue = formatCPF(value);
      break;
    // 可扩展其他格式化类型
    default:
      formattedValue = value;
  }

  return <Typography variant="body2">{formattedValue}</Typography>;
};

// 在表格中使用：
<TableCell><MaskedText value={row.phone} type="brazil-phone" /></TableCell>

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