[Taro React] ---- Implementierung häufig verwendeter benutzerdefinierter React Hooks [5] Modales Dialogfeld anzeigen

1. Nutzungsszenarien modaler Dialogfelder

  1. Taro.showModal (Objektobjekt) kann nur Zeichenfolgeninhalte übergeben, was relativ einfach ist und nicht verarbeitet werden kann, wenn die Formular- oder Inhaltsstile unterschiedlich sind.
  2. Wenn bei der Verwendung von Taro.showModal auf einer H5-Seite ein Element höherer Ebene auf der Seite angezeigt wird, werden zuerst die Elemente niedriger Ebene und dann die Elemente hoher Ebene abgedeckt, da Taro.showModal über einen Animationsprozess verfügt bedeckt.

2. Lösen Sie das Problem

  1. Passen Sie eine [Modal Dialog]-Komponente an, aber das Problem besteht darin, dass Sie eine Variable verwenden müssen, um sie zu steuern. Wenn auf der Seite viele Maskenebenen vorhanden sind, nehmen die Steuervariablen zu, was problematischer ist.
  2. Basierend auf[taro reagieren] ---- Häufig verwendete benutzerdefinierte React Hooks-Implementierung [4] Maskenebene und dann ein useSelfModal kapseln Haken.

3. showModal-Definition

  1. Definieren Sie die Werte der Standardparameter defaultProps;
  2. Verwenden Sie Object.assign, um eingehende opts und defaultProps zusammenzuführen.
  3. Verwenden Sie die Show von useMask, um die erstellte Inhaltsstruktur zu übergeben!
  const showModal = function(opts){
    let defaultProps = {
      position: 'center', 
      opacity: 0.4,
      zIndex: 1026,
      title: null,
      co

Guess you like

Origin blog.csdn.net/m0_38082783/article/details/134811745