<FormattedMessage />无标签返回字符串及Bootstrap Table国际化问题求助

嘿，我来帮你搞定这两个国际化相关的问题，咱们一个一个来解决：

一、让

return (<FormattedMessage />)

返回无标签字符串 #

<FormattedMessage>本质是个React组件，默认会渲染成<span>（或者你指定的元素），如果想要纯字符串的话，得用react-intl提供的底层API——formatMessage方法，具体分两种场景：

函数组件场景（推荐） #

用useIntl Hook直接获取国际化实例，调用formatMessage就能拿到纯字符串：

import { useIntl } from 'react-intl';

const YourComponent = () => {
  const intl = useIntl();
  // 直接获取无标签的翻译文本
  const plainText = intl.formatMessage({ id: 'your.message.key' });
  
  // 可以直接把这个字符串用在任何需要的地方，比如作为变量、属性值等
  return <div>{plainText}</div>;
};

类组件场景 #

如果是类组件，就用injectIntl高阶组件把国际化实例注入到props里：

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

class YourComponent extends React.Component {
  render() {
    const { intl } = this.props;
    const plainText = intl.formatMessage({ id: 'your.message.key' });
    return <div>{plainText}</div>;
  }
}

// 声明propTypes确保类型正确
YourComponent.propTypes = {
  intl: intlShape.isRequired,
};

export default injectIntl(YourComponent);

二、Bootstrap Table通过headerFormatter实现动态翻译 #

既然你把列配置迁移到了外部文件，核心思路就是让headerFormatter能访问到国际化的formatMessage方法，这里给你两种实用的实现方式：

方式1：列配置写成函数，接收intl实例 #

把外部的列配置改成一个函数，接收intl作为参数，返回处理好的列数组，这样在表格组件里传入intl就能直接用：

// 外部列配置文件：columns.js
export const getTableColumns = (intl) => [
  {
    dataField: 'id',
    headerFormatter: () => intl.formatMessage({ id: 'table.column.id' }),
    sort: true,
    searchFilter: true
  },
  {
    dataField: 'userName',
    headerFormatter: () => intl.formatMessage({ id: 'table.column.username' }),
    sort: true,
    searchFilter: true
  },
  // 其他列...
];

// 你的表格组件
import { useIntl } from 'react-intl';
import { getTableColumns } from './columns';
import BootstrapTable from 'react-bootstrap-table-next';

const YourTable = () => {
  const intl = useIntl();
  // 传入intl获取带翻译的列配置
  const columns = getTableColumns(intl);
  
  return (
    <BootstrapTable
      keyField="id"
      data={yourDataSource}
      columns={columns}
      // 你的其他配置：searchFilters、sort等
    />
  );
};

方式2：静态列配置+组件内动态添加headerFormatter #

如果不想修改外部列配置的结构，可以给每个列加个自定义字段（比如headerI18nKey）存储翻译ID，然后在组件里遍历列配置，动态添加headerFormatter：

// 外部列配置文件：columns.js
export const baseTableColumns = [
  {
    dataField: 'id',
    headerI18nKey: 'table.column.id', // 自定义字段存翻译ID
    sort: true,
    searchFilter: true
  },
  {
    dataField: 'userName',
    headerI18nKey: 'table.column.username',
    sort: true,
    searchFilter: true
  },
  // 其他列...
];

// 你的表格组件
import { useIntl } from 'react-intl';
import { baseTableColumns } from './columns';
import BootstrapTable from 'react-bootstrap-table-next';

const YourTable = () => {
  const intl = useIntl();
  // 遍历列配置，添加动态翻译的headerFormatter
  const columns = baseTableColumns.map(col => ({
    ...col,
    headerFormatter: () => intl.formatMessage({ id: col.headerI18nKey })
  }));
  
  return (
    <BootstrapTable
      keyField="id"
      data={yourDataSource}
      columns={columns}
      // 你的其他配置
    />
  );
};

不管用哪种方式，只要你的表格组件在IntlProvider的包裹范围内，useIntl就能正常获取到国际化上下文，动态翻译表头就没问题啦。

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