使用react-intl-universal进行组件和非组件的国际化

最新推荐文章于 2024-09-04 10:10:49 发布

逆风飞翔的猿

最新推荐文章于 2024-09-04 10:10:49 发布

阅读量5.9k

点赞数 4

分类专栏： React 文章标签： react-intl-universal国际化组件非组件

本文链接：https://blog.csdn.net/chenqk_123/article/details/102858073

版权

在做react项目时，用到了国际化。本想使用i8next等第三方国际化文件，但想了想作为react项目应该有自持的js作为国际化的支持。于是在github上搜索了一下，发现了两个:

一个是react-intl，从星级可以看出是react最常用的一种国际化，最大的好处是它用props的方式注入语言包，也就是可以在不刷新页面的情况下直接更改显示的语言。

但是只支持React.Component，也就是貌似只能在React.Compoent中使用，并不能解决组件以外的国际化以及表单校验的国际化，比如我用react+antd搭建的项目，如果想使用antd的表格组件那么，效果如下

我会这么使用：

                <Table bordered rowKey={record => record.uid}
                    dataSource={this.state.list}
                    columns={this.state.columns}
                    rowSelection={rowSelection}
                    pagination={
  {
                        showSizeChanger: true,
                        // showQuickJumper: true,
                        total: this.state.list.length, // 数据总数
                        pageSize: this.state.pageSize, // 每页条数
                        current: this.state.current, // 当前页码
                        showTotal: ((total) => {
                            return `Total: ${total} items`;
                        })
                    }}
                    loading={this.state.loading}
                    onChange={this.handleTableChange}
                    onRow={(record, rowkey) => {
                        return {
                            onClick: this.showRow.bind(this, record, rowkey)
                        }
                    }} />;

为了美观，并不是所有的东西都会定义在一个组件中，现在我把table组件中的column抽离出来，形成了一个单独的文件

称为columns.js

const columns = [
    {
        title: "Start NAS IP",
        dataIndex: "startNASIp",
        key: "startNASIp",
        sorter: true
    },
    {
        title: "End NAS IP",
        dataIndex: "endNASIp",
        key: "endNASIp",
        sorter: true
    },
    {
        title: "Nas Name",
        dataIndex: "nasName",
        key: "nasName",
        sorter: true
    },
    {
        title: "Description",
        dataIndex: "description",
        key: "description",
        sorter: true
    },
    {
        title: "DM Attributes",
        dataIndex: "dm_attributes",
        key: "dm_attributes",
        sorter: true
    },
];
export default columns

那么我在列表组建中引入这个js文件即可使用，效果就像上面的那样。

我现在的需求就会变成怎样使用react-intl或者react-intl-universal 怎样让一个普通的js非组件化的文件也能实现国际化呢？

在网上搜罗了一番，千篇一律，只是谈到了react-intl-universal的一般用法，简单的在组件中使用，官方也给出了例子，好多的博客也都是参考官网做的例子。没有我想要的效果。

先看一看网上千篇一律的基本实现方法吧。