如何从react-intl的FormattedMessage提取字符串解决material-table CSV导出表头异常

你当前遇到的问题核心是：给material-table的title字段传入的是<IntlMessage /> React组件实例，CSV导出逻辑只会做普通的字符串类型转换，React组件转字符串的结果就是[object Object]。配置<IntlProvider textComponent={React.Fragment}>仅会修改FormattedMessage渲染到DOM时的外层标签，本质还是返回React组件，无法解决导出场景的问题。

以下是可直接落地的解决方案： #

方案1：使用useIntl Hook（函数组件适用） #

在配置表头的函数组件中直接调用useIntl获取intl实例，调用formatMessage方法拿到纯文本：

// 导入依赖
import { useIntl } from 'react-intl';

// 组件内部逻辑
function YourTableComponent() {
  const intl = useIntl();
  // 配置表头
  const tableColumns = [
    {
      // 直接传入国际化id，返回对应语言的纯字符串
      title: intl.formatMessage({ id: '你的表头国际化id' }),
      field: '对应字段名'
    },
    // 其他列配置...
  ];

  // 后续material-table的配置、渲染逻辑
}

方案2：扩展现有封装适配导出场景 #

如果你想统一走你封装的IntlMessages.js逻辑，可以新增一个专门用于获取纯文本的工具方法，修改IntlMessages.js代码如下：

import React from 'react';
import {FormattedMessage, injectIntl, useIntl} from 'react-intl';

const InjectMassage = props => <FormattedMessage {...props} />;

// 新增获取国际化纯文本的Hook
export const useIntlText = () => {
  const intl = useIntl();
  return (id, placeholderValues = {}) => intl.formatMessage({ id }, placeholderValues);
}

export default injectIntl(InjectMassage, {
  withRef: false
});

在配置表头的组件中使用：

import { useIntlText } from "./IntlMessages.js";

function YourTableComponent() {
  const getIntlText = useIntlText();
  const tableColumns = [
    {
      title: getIntlText('你的表头国际化id'),
      field: '对应字段名'
    }
  ];
}

类组件适配方案 #

如果你的表组件是类组件无法使用Hook，使用injectIntl高阶组件注入intl属性即可：

import { injectIntl } from 'react-intl';

class YourTableComponent extends React.Component {
  render() {
    const tableColumns = [
      {
        title: this.props.intl.formatMessage({ id: '你的表头国际化id' }),
        field: '对应字段名'
      }
    ];
    // 渲染逻辑
  }
}

export default injectIntl(YourTableComponent);

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