Skip to content

[ConfigProvider] MessagePlugin, NotificationPlugin, DrawerPlugin, DialogPlugin 函数式调用,切换语言时,不生效 #3853

@javionlog

Description

@javionlog

tdesign-react 版本

1.15.1

重现链接

https://codesandbox.io/p/devbox/t5l32n

重现步骤

import { useState } from "react";
import type { GlobalConfigProvider } from "tdesign-react";
import {
  ConfigProvider,
  Select,
  Space,
  Button,
  Pagination,
  Dialog,
  DialogPlugin,
  DrawerPlugin,
  MessagePlugin,
  NotificationPlugin,
} from "tdesign-react";
import enConfig from "tdesign-react/es/locale/en_US";
import zhConfig from "tdesign-react/es/locale/zh_CN";

function App() {
  const langConfigMap = {
    "zh-cn": zhConfig,
    "en-us": enConfig,
  };

  const [globalConfig, setGlobalConfig] = useState<GlobalConfigProvider>(
    langConfigMap["en-us"]
  );

  const [dialogVisible, setDialogVisible] = useState(false);
  const [lang, setLang] = useState("en-us");

  const onOpenDialogPlugin = () => {
    const instance = DialogPlugin({
      body: <Pagination total={36} showJumper maxPageBtn={5} />,
      onClose: () => {
        instance.hide();
      },
    });
  };

  const onOpenDrwaerPlugin = () => {
    const instance = DrawerPlugin({
      body: <Pagination total={36} showJumper maxPageBtn={5} />,
      onClose: () => {
        instance.destroy();
      },
    });
  };

  const onOpenMessagePlugin = () => {
    MessagePlugin("success", {
      content: <Pagination total={36} showJumper maxPageBtn={5} />,
    });
  };

  const onOpenNotificationPlugin = () => {
    NotificationPlugin("success", {
      content: <Pagination total={36} showJumper maxPageBtn={5} />,
    });
  };

  return (
    <ConfigProvider globalConfig={globalConfig}>
      <Space>
        <Select
          value={lang}
          options={[
            { label: "中文", value: "zh-cn" },
            { label: "English", value: "en-us" },
          ]}
          onChange={(val: "zh-cn" | "en-us") => {
            setLang(val);
            setGlobalConfig(langConfigMap[val]);
          }}
        />
        <Button onClick={() => setDialogVisible(true)}>打开 Dialog</Button>
        <Button onClick={onOpenDialogPlugin}>打开 DialogPlugin</Button>
        <Button onClick={onOpenDrwaerPlugin}>打开 DrawerPlugin</Button>
        <Button onClick={onOpenMessagePlugin}>打开 MessagePlugin</Button>
        <Button onClick={onOpenNotificationPlugin}>
          打开 NotificationPlugin
        </Button>
      </Space>
      <Pagination total={36} showJumper maxPageBtn={5} />
      <Dialog visible={dialogVisible} onClose={() => setDialogVisible(false)}>
        <Pagination total={36} showJumper maxPageBtn={5} />
      </Dialog>
    </ConfigProvider>
  );
}

export default App;

期望结果

切换语言时,能正确显示对应的语言

实际结果

切换语言时,不能正确显示对应的语言

框架版本

React(19.0.0)

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    Status

    No status

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions