tdesign-react icon indicating copy to clipboard operation
tdesign-react copied to clipboard

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

Open javionlog opened this issue 2 months ago • 3 comments

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

javionlog avatar Sep 29 '25 06:09 javionlog

👋 @javionlog,感谢给 TDesign 提出了 issue。 请根据 issue 模版确保背景信息的完善,我们将调查并尽快回复你。

github-actions[bot] avatar Sep 29 '25 06:09 github-actions[bot]

虽然可以用 ConfigProvider 包裹 JSX 暂时解决,但是不够优雅且每次调用都要处理很繁琐,希望可以提供注入上下文的方式使用

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

javionlog avatar Sep 29 '25 07:09 javionlog

可以开启 isContextEffectPlugin API

const langConfigMap = {
  'zh-cn': { ...zhConfig, isContextEffectPlugin: true },
  'en-us': { ...enConfig, isContextEffectPlugin: true },
};

RylanBot avatar Oct 03 '25 23:10 RylanBot