kendo-react组件切换语言

本文只介绍了pager组件，如果想尝试其他组件，请参考kendo-react官网

更多细节可以查看kendo-react-pager

demo，可以看到pager显示指定的翻译值（这里我给的是法语，为了对比，details等标题给的是英语）

实现

引入

import {LocalizationProvider, loadMessages} from "@progress/kendo-react-intl";
import {PageChangeEvent, Pager} from "@progress/kendo-react-data-tools";

在componentDidMount里写入

const pagers = {
      firstPage: "Ir a la primera página",
      previousPage: "Ir a la página anterior",
      nextPage: "Ir a la página siguiente",
      lastPage: "Ir a la última página",
      page: "Página",
      of: "de",
      info: "{0} - {1} de {2} ítems",
      itemsPerPage: "ítems por página",
    };
    loadMessages(
      {
        pager: pagers,
      },
      "es"
    );

渲染的时候在组件外包裹 LocalizationProvider

<LocalizationProvider language="es">
    //pager组件
</LocalizationProvider>

 

完整代码

import * as React from "react";
import {LocalizationProvider, loadMessages} from "@progress/kendo-react-intl";
import {PageChangeEvent, Pager} from "@progress/kendo-react-data-tools";

export interface IPagerToolProps {
  /**
   * The number of records to be skipped by the pager.
   */
  skip: number;
  /**
   * The number of records to take.
   */
  take: number;
  /**
   * The total number of records.
   */
  total: number;
  /**
   * Displays a menu for selecting the page size.
   */
  pageSizes: Array<number>;
  /**
   * Fires when the page of the Pager is changed. You have to handle the event yourself and page the data.
   */
  onPageChange: (event: PageChangeEvent) => void;
}

export class PagerTool extends React.Component<IPagerToolProps> {
  constructor(props: IPagerToolProps) {
    super(props);
    this.changePagerLanguage = this.changePagerLanguage.bind(this);
  }

  public componentDidMount() {
    this.changePagerLanguage();
  }

  public componentDidUpdate(prevProps: IPagerToolProps) {
    let isSame = false;
    if (
      this.props.skip !== prevProps.skip ||
      this.props.take !== prevProps.take ||
      this.props.total !== prevProps.total ||
      JSON.stringify(this.props.pageSizes) !== JSON.stringify(prevProps.pageSizes)
    )
      isSame = true;
    if (isSame) {
      this.changePagerLanguage();
    }
  }

  public render() {
    const {skip, take, total, pageSizes, onPageChange} = this.props;

    return (
      <LocalizationProvider language="es">
        <Pager
          skip={skip}
          take={take}
          total={total}
          onPageChange={onPageChange}
          info={true}
          buttonCount={5}
          previousNext={true}
          type="numeric"
          pageSizes={pageSizes}
        />
      </LocalizationProvider>
    );
  }

  /** change language of page tool */
  private changePagerLanguage() {
    const pagers = {
      firstPage: "Ir a la primera página",
      previousPage: "Ir a la página anterior",
      nextPage: "Ir a la página siguiente",
      lastPage: "Ir a la última página",
      page: "Página",
      of: "de",
      info: "{0} - {1} de {2} ítems",
      itemsPerPage: "ítems por página",
    };
    loadMessages(
      {
        pager: pagers,
      },
      "es"
    );
  }
}

仅此记录。