React

Um mdui in React zu verwenden, befolgen Sie einfach die Schritte auf der Installationsseite.

Hinweise

Bei der Verwendung von mdui in React gibt es einige Einschränkungen. Diese Einschränkungen sind allgemeine Einschränkungen bei der Verwendung von Web Components in React und keine spezifischen Einschränkungen der mdui-Komponentenbibliothek.

Event-Bindung

Da React benutzerdefinierte Ereignisse nicht unterstützt, müssen Sie beim Verwenden der von mdui-Komponenten bereitgestellten Ereignisse zuerst eine Referenz auf die Komponente mit dem Attribut ref erhalten.

Hier ist ein Beispiel für die Verwendung von mdui-Komponentenereignissen in React:

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 wurde umgeschaltet');
    };

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

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

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

export default App;

JSX TypeScript-Typdeklaration

Wenn Sie mdui in einer TypeScript-Datei (.tsx) verwenden, müssen Sie eine TypeScript-Typdeklaration hinzufügen. Sie müssen die Typdeklarationsdatei von mdui manuell in die .d.ts-Datei Ihres Projekts importieren:

/// <reference types="mdui/jsx.en.d.ts" />