文章

問題描述

在使用 Ant Design 5.x 時,如果直接使用 Modal.warning() 或其他模态方法,可能會出現下列錯誤訊息:

Warning: [antd: Modal] Static function can not consume context like dynamic theme. Please use 'App' component instead.

錯誤原因

從 Ant Design 5 開始,Modal 系列給對話相關的模态出現了 Context 依賴性問題,結果不能直接使用靜態出現的模态方法,如 Modal.warning()。而是需要將 App 對話存取出來,使用 App.useApp() 來導入模态出現功能。

解決方式

使用 App.useApp()ConfigProvider 存取出對話功能,此外需確保 ConfigProvider 包裹 App :

import React from 'react';
import { ConfigProvider, App, Button } from 'antd';

const MyComponent = () => {
    const { modal } = App.useApp();
    return (
         <Button onClick={() => modal.warning({title: "彈窗訊息"})}>
            點擊顯示彈窗
         </Button>     
    );
};


const MyApp = () => {
    return(
        <ConfigProvider theme={theme} >
            <App>
                <MyComponent />
            </App>
        </ConfigProvider>
    );
};

export default AppWrapper;

使用 create react app 或是 vite 部署 react 靜態網站的方式其實很類似,主要的差別就是在 vite.config.js 裡面的寫法。

閱讀更多

不知道大家有沒有遇過,假設你的一個頁面上有不只一個 input,那麼你在 android 裝置上的 chrome 輸入好內容後,直接按下軟鍵盤的 enter(回車鍵),他竟然就自己跳到下一個 input 並且 focus 在那裡…

閱讀更多

使用vite 建立一個react 專案,通常會搭配哪些套件呢?

  1. vite + react
  2. mui (material ui)
  3. react-router-dom v6
  4. zustand 狀態管理
閱讀更多

呼叫api上傳圖片時候如果要顯示進度條,目前有兩種方式可以加入偵聽事件,

  1. 使用js原生的 XMLHttpRequest
  2. 使用axios

其實axios也只是把偵聽事件的名稱改掉而已,背後做法應該是一樣的XD

閱讀更多

我們在串接綠界資訊的時候,遇到一個問題就是綠界的文件上寫,此方法要使用前端的post方法,但是我用call api的post方法去打,卻回應跨域錯誤,寫信綠問綠界,又一問三不知~

好在後來終於被後端工程師提醒才明白,在上古時期的網頁開發是沒有分前後端的,所以post方法都是用<form>標籤去做,我整個大開眼界欸,雖然還不懂這其中的差別,但總歸是成功了。

閱讀更多

網頁需要用到相機的場景還滿多的,像是身份驗證需要拍證件照上傳、發文、留言,是很基本的網頁應用。

閱讀更多

material ui 框架沒有提供輪播圖 component,需要另外安裝套件,這邊介紹一個我常用的套件 React Slick,剛好他也有出 react 版本。

閱讀更多

如題,使用 Textfield 的 select 組件時,我們會想預先設定已選取的項目,但是我們指定了,畫面上的 input 卻還是沒有選起來的樣式。

閱讀更多

我不是機器人驗證,在一些敏感資訊的交互時候可以加上,確保操作者確實是本人。

驗證方式Google有提供兩個版本:v2、v3

其中v2版本又分為:checkbox(就是會有一個勾勾要打勾選我不是機器人)、invisible(從背景打api驗證送給後端)

閱讀更多