React.js טויער

טעלעפּאָרטאַטיאָן אין React.js

צי האָט איר וויסן אַז React פּראָווידעס אַ ספּעציעל און זייער שטאַרק קאָמפּאָנענט גערופֿן "טויער" וואָס קענען אָנקלאַפּן זיין קינדער אין אַ גאָר אַנדערש אָרט אין דיין אַפּ? אויב נישט, עס איז צייט צו לערנען עפּעס נייַ!

די אַנאַטאַמי פון אַ React.js טויער

דאָ איז אַ שנעל איבערבליק פון ווי דער פּאָרטאַל קאָמפּאָנענט אין React.js אַרבעט פריער.

• ערגעץ אין דיין קאָד, איר אָנקלאַפּן אַן עלעמענט וואָס וועט באַלעבאָס די קינדער פון די טויער
• דערנאָך איר באַקומען אַ רעפֿערענץ צו דעם עלעמענט
• ערגעץ אַנדערש אין דיין אַפּ, איר מאַונט די פּאָרטאַל קאָמפּאָנענט און פאָרן די רעפֿערענץ באקומען פֿון דער באַלעבאָס עלעמענט
• אַלץ וואָס איז איצט מאָונטעד אין די טויער וועט אַקשלי זיין מאָונטעד אין דער באַלעבאָס פֿון דער ערשטער שריט

צו בעסער פֿאַרשטיין וואָס איז געשעעניש, איך באשאפן די פאלגענדע פּשוט וויזשוואַלאַזיישאַנז צו אילוסטרירן די פּאָרטאַל פאַנגקשאַנאַליטי.

לויט די בילדער, די פאלגענדע גראַפיקס ווייַזן די זעלבע פּראָצעס, אָבער דאָס מאָל מיט סימפּלאַפייד קאָד ביישפילן.

דער טויער איז אפילו מער שטאַרק ווי איר טראַכטן טכילעס. עס אפילו אַלאַוז צו ופפירן קייפל קינדער פֿון קייפל פּאָרטאַלס אין דער זעלביקער ציל עלעמענט. דער סדר פון מאַונטינג פון די פּאָרטאַלס אויך דיפיינז די סדר פון די יסודות אין דער באַלעבאָס.

דאָס איז אויך זייער גרינג צו טיילן די רעפֿערענץ צו דער באַלעבאָס עלעמענט וואָס וועט אַנטהאַלטן אַלע טעלאַפּאָרטעד קינדער. דער באַאַמטער דאַקיומענטיישאַן באשרייבט די נוצן פון document.getElementById, אָבער איר קענט אויך נוצן React.js 'useRef-hook. די פאלגענדע קאָד ביישפּיל דעמאַנסטרייץ אַ פּשוט ימפּלאַמענטיישאַן וואָס ווייַזן אַלץ דיסקרייבד ביז איצט.

import React, { useEffect, useRef, useState } from "react";
import ReactDOM, { createPortal } from "react-dom";

//
// Link to sandbox:
// 👉 https://codesandbox.io/s/react-16-8-0-forked-d8lm1?file=/src/index.js:0-1067
//

// A simple demonstration of the React-Portal
// w/ multiple portals for the same target.
function App() {
  const ref = useRef(null);
  const [isRefReady, setIsRefReady] = useState(false);

  // Run one more render to actually
  // show the content of our portal.
  // This is necessary, as the setter
  // for the 'ref' alone won't trigger
  // a render.
  useEffect(() => {
    setIsRefReady(Boolean(ref));
  }, []);

  return (
    <div>
      <div>
        {/* The 'target' aka host for our portals. */}
        <header ref={ref} style={{display: "flex", gap: 8 }} />
        <hr/>
      </div>
      <h1>
        Debug
      </h1>
      {isRefReady && createPortal(<button>one</button>, ref.current)}
      {isRefReady && createPortal(<button>two</button>, ref.current)}
      <div>
        {isRefReady && createPortal(<button>three</button>, ref.current)}
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.querySelector("#root"));

ווי אַזוי דער פּאָרטאַל קאָמפּאָנענט ינייבאַלז סימפּלער קאָדירונג

מיסטאָמע די מערסט אָפט נוצן פאַל פֿאַר די React.js טויער איז די ימפּלאַמענטיישאַן פון אַ מאָדאַל קאָמפּאָנענט. איר קענט פשוט דעפינירן דעם ציל אין דעם שורש פון דיין אַפּ ס בוים און נוצן די פּאָרטאַל קאָמפּאָנענט צו אָנקלאַפּן אַ מאָדאַל פֿון אומעטום, רילייאַבלי פלאָוטינג העכער אַלע אינהאַלט.

אן אנדער נוצן פאַל איך טאַקע ימפּלאַמענאַד איז די נוצן פון אַ קוויטל קאַנטיינער. ווי אַ קוויטל קאַנטיינער ריקווייערז ביידע אַ קוויטל פּונקט זיך ווי געזונט ווי די אינהאַלט צו זיין רענדערד ווען די קוויטל איז אויסגעקליבן, איך פשוט דעפינירן צוויי מחנות, איינער פֿאַר די קוויטל-רודערן און די אנדערע פֿאַר די אויסגעקליבן אינהאַלט.

דערנאָך איך אָנקלאַפּן אַ מענגע פון קאַמפּאָונאַנץ וואָס יעדער נוצן אַ טויער פֿאַר די קוויטל-נומער און סעלעקטעד אינהאַלט. דאָס אַלאַוז מיר צו שטעלן די געשעפט לאָגיק ווו עס אַקשלי געהערט - אין יעדער באַזונדער קאָמפּאָנענט.

עס זענען אַוואַדע אפילו מער טשיקאַווע נוצן קאַסעס פֿאַר די פּאָרטאַל קאָמפּאָנענט. די ביגאַסט מייַלע וואָס איך טראַכטן עס ינייבאַלז איז די ענג קאַפּלינג פון געשעפט לאָגיק אין אַ איין קאָמפּאָנענט, וועמענס קינדער זענען מאָונטעד אין פאַרשידענע ערטער. דער מוסטער אַלאַוז גרויס בייגיקייט און קוסטאָמיזאַטיאָן, אָבער קען פירן צו צעמישונג אין דיין קאָדבאַסע ווי די קוקן זענען שייך.

קוק אויך אין דער באַאַמטער דאַקיומענטיישאַן פֿאַר אַלע דעטאַילס וועגן React.js פּאָרטאַלס.