React

在 React 中使用 mdui 時，只需要按照 安裝 頁面的步驟完成安裝即可。

注意事項

在 React 中使用 mdui 時，存在一些限制。這些限制是在 React 中使用 Web Components 的通用限制，而非 mdui 元件庫本身的限制。

事件繫結

由於 React 不支援自訂事件，因此在使用 mdui 元件提供的事件時，需要先使用 ref 屬性取得元件的參照。

以下是在 React 中使用 mdui 元件事件的範例：

import { useEffect, useRef } from 'react';
import 'mdui/mdui.css';
import 'mdui/components/switch.js';

function App() {
  const switchRef = useRef(null);

  useEffect(() => {
    const handleToggle = () => {
      console.log('switch is toggled');
    };

    switchRef.current.addEventListener('change', handleToggle);

    return () => {
      switchRef.current.removeEventListener('change', handleToggle);
    };
  }, []);

  return <mdui-switch ref={switchRef}></mdui-switch>;
}

export default App;

JSX TypeScript 型別宣告

如果你在 TypeScript 檔案（.tsx）中使用 mdui，需要加入 TypeScript 型別宣告。你需要手動引入 mdui 的型別宣告檔案：

/// <reference types="mdui/jsx.zh-cn.d.ts" />