Anwendungsbeispiele für React Hooks

Typ NativeButtonProps = MyButtonProps & React.ButtonHTMLAttributes<HTMLElement>

React von „react“ importieren
Klassennamen aus „Klassennamen“ importieren

Typ ButtonSize = "groß" | "klein"
Typ ButtonType = ‚primär‘ | ‚Standard‘ | ‚Gefahr‘

Schnittstelle BaseButtonProps {
 Klassenname?: Zeichenfolge;
 deaktiviert?: Boolesch;
 Größe?: Schaltflächengröße;
 btnTyp?: Schaltflächentyp;
 Kinder?: React.ReactNode;
}

Typ NativeButtonProps = BaseButtonProps & React.ButtonHTMLAttributes<HTMLElement>
const Button: React.FC<NativeButtonProps>= (props) => {
 Konstante {
 btnTyp,
 Klassenname,
 deaktiviert,
 Größe,
 Kinder,
 //resProps wird verwendet, um alle verbleibenden Eigenschaften abzurufen ... resProps
 } = Requisiten
 // btn, btn-lg, btn-primär
 const Klassen = Klassennamen ('btn', Klassenname, {
 [`btn-${btnType}`]: btnTyp,
 [`btn-${size}`]: Größe,
 'deaktiviert': deaktiviert
 })
 zurückkehren (
 <Schaltfläche
  Klassenname={Klassen}
  deaktiviert={deaktiviert}
  {...resProps}
 >
  {Kinder}
 </button>
 )
}

Schaltfläche.defaultProps = {
 deaktiviert: false,
 btnType: „Standard“
}

Schaltfläche „Standard exportieren“

<Button deaktiviert>Hallo</Button>
<Button btnType='primary' size='large' className="haha">Hallo</Button>
<Button btnType='Gefahr' size='klein' onClick={() => alert('haha')}>Test</Button>

Klassennamen('foo', 'Bar'); // => 'foo Bar'
Klassennamen('foo', {bar: true}); // => 'foo bar'
Klassennamen ({'foo-bar': true}); // => 'foo-bar'
Klassennamen({ 'foo-bar': false }); // => ''
Klassennamen({ foo: true }, { bar: true }); // => 'foo bar'
Klassennamen({ foo: true, bar: true }); // => 'foo bar'

// viele Argumente verschiedener Typen
Klassennamen('foo', {bar: true, duck: false}, 'baz', {quux: true}); // => 'foo bar baz quux'

// andere falsche Werte werden einfach ignoriert
Klassennamen (null, falsch, „Balken“, nicht definiert, 0, 1, { baz: null }, „“); // => „Balken 1“

<button class="btn haha ​​​​btn-primary btn-lg">Hallo</button>

<Menü defaultIndex={'0'} onSelect={(index) => {alert(index)}} mode="vertical" defaultOpenSubMenus={['2']}>
 <Menüpunktindex={'0'}>
 cooler Link
 </Menüpunkt>
 <Menüpunktindex={'1'}>
 cooler Link 2
 </Menüpunkt>
 <Untermenü Titel="Dropdown">
 <Menüpunktindex={'3'}>
  Dropdown 1
 </Menüpunkt>
 <Menüpunktindex={'4'}>
  Dropdown 2
 </Menüpunkt>
 </Untermenü>
 <Menüpunktindex={'2'}>
 cooler Link 3
 </Menüpunkt>
</Menü>

<Menü bei Auswahl={(index) => {alert(index)}}>

Typ SelectCallback = (selectedIndex: Zeichenfolge) => void

Schnittstelle MenuProps {
 beiAuswahl?: SelectCallback;
}

 const handleClick = (Index: Zeichenfolge) => {
 // onSelect ist ein Union-Typ, der existieren kann oder nicht, daher müssen wir entscheiden, ob (onSelect) {
  bei Auswahl(Index)
 }
 }

wenn (Anzeigename === 'Menüelement' || Anzeigename === 'Untermenü') {
 // Klonen und ein neues React-Element mit dem Element als Beispiel zurückgeben. Der erste Parameter ist das geklonte Beispiel. return React.cloneElement(childElement, {
 index: index.toString()
 })
} anders {
 console.error("Warnung: Das Menü hat ein untergeordnetes Element, das keine MenuItem-Komponente ist")
}

importiere React, { useState, createContext } von 'react'
Klassennamen aus „Klassennamen“ importieren
importiere { MenuItemProps } aus './menuItem'

Typ MenuMode = "horizontal" | "vertikal"
Typ SelectCallback = (selectedIndex: Zeichenfolge) => void

Exportschnittstelle MenuProps {
 defaultIndex?: string; // Welche Menüunterkomponente wird zum Hervorheben von className verwendet?: string;
 Modus?: Menümodus;
 Stil?: React.CSSProperties;
 onSelect?: SelectCallback; // Das Klicken auf ein Untermenü kann einen Rückruf auslösen defaultOpenSubMenus?: string[]; 
}

// Bestimmen Sie den Datentyp, der von der übergeordneten Komponente an die untergeordnete Komponente übergeben wird Schnittstelle IMenuContext {
 Index: Zeichenfolge;
 beiAuswahl?: SelectCallback;
 Modus?: Menümodus;
 defaultOpenSubMenus?: string[]; // Daten müssen an Kontext übergeben werden
}

//Erstellen Sie einen Kontext, der an die untergeordnete Komponente übergeben wird
// Allgemeine Einschränkung, da der Index der einzugebende Wert ist. Schreiben Sie hier also einen Standardanfangswert. export const MenuContext = createContext<IMenuContext>({index: '0'})

const Menü: React.FC<MenuProps> = (props) => {
 const { Klassenname, Modus, Stil, untergeordnete Elemente, Standardindex, bei Auswahl, standardmäßig geöffnete Untermenüs} = Eigenschaften
 // Es sollte nur ein MenuItem im aktiven Status sein. Verwenden Sie useState, um seinen Status zu steuern. const [ currentActive, setActive ] = useState(defaultIndex)
 const classes = classNames('menu-demo', className, {
 'menu-vertikal': Modus === 'vertikal',
 „Menü horizontal“: Modus === „horizontal“
 })

 // handleClick definieren, um die Änderung des aktiven Zustands nach dem Klicken auf menuItem zu implementieren const handleClick = (index: string) => {
 setActive(index)
 // onSelect ist ein Union-Typ, der existieren kann oder nicht, daher müssen wir entscheiden, ob (onSelect) {
  bei Auswahl(Index)
 }
 }

 // Wenn Sie auf eine Unterkomponente klicken, lösen Sie die Funktion onSelect aus und ändern Sie die Hervorhebungsanzeige const passedContext: IMenuContext = {
 // currentActive ist vom Typ String | undefined und Index ist vom Typ Number, daher müssen wir die folgende Entscheidung treffen, um den Typindex weiter zu klären: currentActive ? currentActive : '0',
 onSelect: handleClick, // Rückruffunktion, ob beim Klicken auf eine Unterkomponente der Modus ausgelöst werden soll: Modus,
 Standardmäßige offene Untermenüs,
 }

 const renderChildren = () => {
 returniere React.Children.map(Kinder, (Kind, Index) => {
  // child enthält viele Typen. Um den Typ zu erhalten, den wir für intelligente Eingabeaufforderungen benötigen, müssen wir die Typbehauptung const childElement = child as React.FunctionComponentElement<MenuItemProps> verwenden.
  const { Anzeigename } = untergeordnetesElement.Typ
  wenn (Anzeigename === 'Menüelement' || Anzeigename === 'Untermenü') {
  // Klonen und ein neues React-Element mit dem Element als Beispiel zurückgeben. Der erste Parameter ist das geklonte Beispiel. return React.cloneElement(childElement, {
   index: index.toString()
  })
  } anders {
  console.error("Warnung: Das Menü hat ein untergeordnetes Element, das keine MenuItem-Komponente ist")
  }
 })
 }
 zurückkehren (
 <ul Klassenname={Klassen} Stil={Stil}>
  <MenuContext.Provider-Wert={passedContext}>
  {renderChildren()}
  </MenuContext.Provider>
 </ul>
 )
}

Menü.defaultProps = {
 Standardindex: '0',
 Modus: 'horizontal',
 Standardmäßig werden Untermenüs geöffnet: []
}

Standardmenü exportieren

React von „react“ importieren
importiere { useContext } von 'react'
Klassennamen aus „Klassennamen“ importieren
importiere { MenuContext } aus './menu'

Schnittstelle MenuItemProps exportieren {
 Index: Zeichenfolge;
 deaktiviert?: Boolesch;
 Klassenname?: Zeichenfolge;
 Stil?: React.CSSProperties;
}

const MenuItem: React.FC<MenuItemProps> = (props) => {
 const { index, deaktiviert, Klassenname, Stil, untergeordnete Elemente } = Requisiten
 const Kontext = useContext(MenüKontext)
 const classes = classNames('Menüelement', className, {
 'is-disabled': deaktiviert,
 // Implementieren Sie die spezifische Logik zum Hervorheben von „is-active“: context.index === index
 })
 const handleClick = () => {
 // Nach der Deaktivierung kann onSelect nicht mehr verwendet werden. Da der Index optional ist, existiert er möglicherweise nicht. Sie müssen typeof verwenden, um eine Entscheidung zu treffen, ob (context.onSelect && !disabled && (typeof index === 'string')) {
  Kontext.beiAuswahl(Index)
 }
 }
 zurückkehren (
 <li Klassenname = {Klassen} Stil = {Stil} beiKlick = {HandleClick}>
  {Kinder}
 </li>
 )
}

MenuItem.displayName = "Menüelement"
Standard-Menüelement exportieren

importiere React, { useContext, FunctionComponentElement, useState } von 'react'
Klassennamen aus „Klassennamen“ importieren
importiere { MenuContext } aus './menu'
importiere { MenuItemProps } aus './menuItem'

Exportschnittstelle SubMenuProps {
 Index?: Zeichenfolge;
 Titel: Zeichenfolge;
 Klassenname?: Zeichenfolge
}

const SubMenu: React.FC<SubMenuProps> = ({ index, title, children, className }) => {
 const Kontext = useContext(MenüKontext)
 // Als nächstes werden wir einige Methoden eines String-Arrays verwenden. Machen Sie also zuerst eine Typbehauptung und behaupten Sie sie als String-Array-Typ const openedSubMenus = context.defaultOpenSubMenus as Array<string>
 //Mithilfe von „include“ ermitteln, ob ein Index vorhanden ist
 const isOpened = (Index und Kontext.Modus === 'vertikal') ? openedSubMenus.includes(Index) : false
 const [ menuOpen, setOpen ] = useState(isOpened) // isOpened gibt true oder false zurück, was ein dynamischer Wert ist const classes = classNames('menu-item submenu-item', className, {
 „ist aktiv“: Kontext.index === Index
 })
 // Wird verwendet, um das Dropdown-Menü anzuzeigen oder auszublenden const handleClick = (e: React.MouseEvent) => {
 e.preventDefault()
 setOpen(!menuOpen)
 }
 let-Timer: beliebig
 // Mit Toggle wird bestimmt, ob geöffnet oder geschlossen werden soll const handleMouse = (e: React.MouseEvent, toggle: boolean) => {
 Zeitüberschreitung löschen(Timer)
 e.preventDefault()
 Timer = setzeTimeout(()=> {
  setOpen(Umschalten)
 }, 300)
 }
 // Ternärer Ausdruck, vertikal const clickEvents = context.mode === 'vertical' ? {
 bei Klick: Klick verarbeiten
 } : {}
 const hoverEvents = Kontext.Modus === 'horizontal' ? {
 beiMauseingabe: (e: React.MouseEvent) => { handleMouse(e, true) },
 beimMauslassen: (e: React.MouseEvent) => { handleMouse(e, false) },
 } : {}

 // Wird verwendet, um den Inhalt des Dropdown-Menüs zu rendern // Gibt zwei Werte zurück, der erste ist das untergeordnete Element, der zweite ist der Index, dargestellt durch i const renderChildren = () => {
 const subMenuClasses = classNames('Menü-Untermenü', {
  'Menü geöffnet': Menü öffnen
 })
 // Mit der folgenden Funktion wird implementiert, dass es im Untermenü nur MenuItems geben kann
 const childrenComponent = React.Children.map(children, (child, i) => {
  const childElement = child als FunctionComponentElement<MenuItemProps>
  wenn (childElement.type.displayName === 'MenuItem') {
  returniere React.cloneElement(childElement, {
   Index: `${index}-${i}`
  })
  } anders {
  console.error("Warnung: SubMenu hat ein untergeordnetes Element, das keine MenuItem-Komponente ist")
  }
 })
 zurückkehren (
  <ul Klassenname={Untermenüklassen}>
  {Kinderkomponente}
  </ul>
 )
 }
 zurückkehren (
 // Operator erweitern, Funktionalität im Inneren hinzufügen, mit der Maus darüberfahren <li key={index} className={classes} {...hoverEvents}>
  <div className="Untermenü-Titel" {...clickEvents}>
  {Titel}
  </div>
  {renderChildren()}
 </li>
 )
}

SubMenu.displayName = "Untermenü"
Standard-Untermenü exportieren