ರಿಯಾಕ್ಟ್ ಪೋರ್ಟಲ್‌ಗಳಲ್ಲಿ ಪರಿಣತಿ: DOM ಕ್ರಮಾನುಗತವನ್ನು ಮೀರಿ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ರೆಂಡರ್ ಮಾಡುವುದು

ಆಧುನಿಕ ವೆಬ್ ಅಭಿವೃದ್ಧಿಯ ವಿಶಾಲವಾದ ಕ್ಷೇತ್ರದಲ್ಲಿ, ರಿಯಾಕ್ಟ್ ವಿಶ್ವಾದ್ಯಂತ ಅಸಂಖ್ಯಾತ ಡೆವಲಪರ್‌ಗಳಿಗೆ ಡೈನಾಮಿಕ್ ಮತ್ತು ಹೆಚ್ಚು ಸಂವಾದಾತ್ಮಕ ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಅಧಿಕಾರ ನೀಡಿದೆ. ಇದರ ಕಾಂಪೊನೆಂಟ್-ಆಧಾರಿತ ಆರ್ಕಿಟೆಕ್ಚರ್ ಸಂಕೀರ್ಣ UI ರಚನೆಗಳನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆ, ಮರುಬಳಕೆ ಮತ್ತು ನಿರ್ವಹಣೆಯನ್ನು ಉತ್ತೇಜಿಸುತ್ತದೆ. ಆದಾಗ್ಯೂ, ರಿಯಾಕ್ಟ್‌ನ ಸೊಗಸಾದ ವಿನ್ಯಾಸದ ಹೊರತಾಗಿಯೂ, ಡೆವಲಪರ್‌ಗಳು ಕೆಲವೊಮ್ಮೆ стандарт ಕಾಂಪೊನೆಂಟ್ ರೆಂಡರಿಂಗ್ ವಿಧಾನ – ಅಂದರೆ, ಕಾಂಪೊನೆಂಟ್‌ಗಳು ತಮ್ಮ ಪೇರೆಂಟ್‌ನ DOM ಎಲಿಮೆಂಟ್‌ನೊಳಗೆ ಮಕ್ಕಳಾಗಿ ತಮ್ಮ ಔಟ್‌ಪುಟ್ ಅನ್ನು ರೆಂಡರ್ ಮಾಡುವುದು – ಗಮನಾರ್ಹ ಮಿತಿಗಳನ್ನು ಒಡ್ಡುವ ಸನ್ನಿವೇಶಗಳನ್ನು ಎದುರಿಸುತ್ತಾರೆ.

ಎಲ್ಲಾ ಇತರ ಕಂಟೆಂಟ್‌ಗಿಂತ ಮೇಲೆ ಕಾಣಿಸಿಕೊಳ್ಳಬೇಕಾದ ಮಾಡಲ್ ಡೈಲಾಗ್, ಜಾಗತಿಕವಾಗಿ ತೇಲುವ ಅಧಿಸೂಚನೆ ಬ್ಯಾನರ್, ಅಥವಾ ಓವರ್‌ಫ್ಲೋ ಆಗುತ್ತಿರುವ ಪೇರೆಂಟ್ ಕಂಟೇನರ್‌ನ ಗಡಿಗಳನ್ನು ಮೀರಿ ಕಾಣಿಸಿಕೊಳ್ಳಬೇಕಾದ ಕಾಂಟೆಕ್ಸ್ಟ್ ಮೆನುವನ್ನು ಪರಿಗಣಿಸಿ. ಈ ಸಂದರ್ಭಗಳಲ್ಲಿ, ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ನೇರವಾಗಿ ತಮ್ಮ ಪೇರೆಂಟ್‌ನ DOM ಕ್ರಮಾನುಗತದೊಳಗೆ ರೆಂಡರ್ ಮಾಡುವ ಸಾಂಪ್ರದಾಯಿಕ ವಿಧಾನವು ಸ್ಟೈಲಿಂಗ್ (z-index ಸಂಘರ್ಷಗಳಂತಹ), ಲೇಔಟ್ ಸಮಸ್ಯೆಗಳು, ಮತ್ತು ಈವೆಂಟ್ ಪ್ರಾಪಗೇಷನ್ ಸಂಕೀರ್ಣತೆಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು. ನಿಖರವಾಗಿ ಇಲ್ಲಿಯೇ ರಿಯಾಕ್ಟ್ ಪೋರ್ಟಲ್‌ಗಳು ರಿಯಾಕ್ಟ್ ಡೆವಲಪರ್‌ನ ಸಾಧನ ಸಂಗ್ರಹದಲ್ಲಿ ಒಂದು ಶಕ್ತಿಶಾಲಿ ಮತ್ತು ಅನಿವಾರ್ಯ ಸಾಧನವಾಗಿ ಬರುತ್ತವೆ.

ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿಯು ರಿಯಾಕ್ಟ್ ಪೋರ್ಟಲ್ ಪ್ಯಾಟರ್ನ್‌ನ ಆಳಕ್ಕೆ ಇಳಿದು, ಅದರ ಮೂಲಭೂತ ಪರಿಕಲ್ಪನೆಗಳು, ಪ್ರಾಯೋಗಿಕ ಅನ್ವಯಗಳು, ಸುಧಾರಿತ ಪರಿಗಣನೆಗಳು ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನ್ವೇಷಿಸುತ್ತದೆ. ನೀವು ಅನುಭವಿ ರಿಯಾಕ್ಟ್ ಡೆವಲಪರ್ ಆಗಿರಲಿ ಅಥವಾ ನಿಮ್ಮ ಪ್ರಯಾಣವನ್ನುพึ่ง ಆರಂಭಿಸುತ್ತಿರಲಿ, ಪೋರ್ಟಲ್‌ಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ನಿಜವಾಗಿಯೂ ದೃಢವಾದ ಮತ್ತು ಜಾಗತಿಕವಾಗಿ ಪ್ರವೇಶಿಸಬಹುದಾದ ಬಳಕೆದಾರ ಅನುಭವಗಳನ್ನು ನಿರ್ಮಿಸಲು ಹೊಸ ಸಾಧ್ಯತೆಗಳನ್ನು ತೆರೆಯುತ್ತದೆ.

ಮೂಲ ಸವಾಲನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು: DOM ಕ್ರಮಾನುಗತದ ಮಿತಿಗಳು

ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳು, ಡಿಫಾಲ್ಟ್ ಆಗಿ, ತಮ್ಮ ಔಟ್‌ಪುಟ್ ಅನ್ನು ತಮ್ಮ ಪೇರೆಂಟ್ ಕಾಂಪೊನೆಂಟ್‌ನ DOM ನೋಡ್‌ಗೆ ರೆಂಡರ್ ಮಾಡುತ್ತವೆ. ಇದು ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್ ಟ್ರೀ ಮತ್ತು ಬ್ರೌಸರ್‌ನ DOM ಟ್ರೀ ನಡುವೆ ನೇರ ಮ್ಯಾಪಿಂಗ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ. ಈ ಸಂಬಂಧವು ಸಹಜ ಮತ್ತು ಸಾಮಾನ್ಯವಾಗಿ ಪ್ರಯೋಜನಕಾರಿಯಾಗಿದ್ದರೂ, ಒಂದು ಕಾಂಪೊನೆಂಟ್‌ನ ದೃಶ್ಯ ಪ್ರಾತಿನಿಧ್ಯವು ತನ್ನ ಪೇರೆಂಟ್‌ನ ನಿರ್ಬಂಧಗಳಿಂದ ಹೊರಬರಬೇಕಾದಾಗ ಇದು ಅಡಚಣೆಯಾಗಬಹುದು.

ಸಾಮಾನ್ಯ ಸನ್ನಿವೇಶಗಳು ಮತ್ತು ಅವುಗಳ ನೋವಿನ ಅಂಶಗಳು:

ಮಾಡಲ್‌ಗಳು, ಡೈಲಾಗ್‌ಗಳು ಮತ್ತು ಲೈಟ್‌ಬಾಕ್ಸ್‌ಗಳು: ಈ ಎಲಿಮೆಂಟ್‌ಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಅಪ್ಲಿಕೇಶನ್‌ನಾದ್ಯಂತ ಮೇಲೆ ಕಾಣಿಸಿಕೊಳ್ಳಬೇಕಾಗುತ್ತದೆ, ಅವುಗಳನ್ನು ಕಾಂಪೊನೆಂಟ್ ಟ್ರೀಯಲ್ಲಿ ಎಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾಗಿದೆ ಎಂಬುದನ್ನು ಲೆಕ್ಕಿಸದೆ. ಒಂದು ಮಾಡಲ್ ಆಳವಾಗಿ ನೆಸ್ಟ್ ಆಗಿದ್ದರೆ, ಅದರ CSS `z-index` ಅದರ ಪೂರ್ವಜರಿಂದ ನಿರ್ಬಂಧಿಸಲ್ಪಡಬಹುದು, ಇದರಿಂದಾಗಿ ಅದು ಯಾವಾಗಲೂ ಮೇಲೆ ಕಾಣಿಸಿಕೊಳ್ಳುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವುದು ಕಷ್ಟವಾಗುತ್ತದೆ. ಇದಲ್ಲದೆ, ಪೇರೆಂಟ್ ಎಲಿಮೆಂಟ್‌ನಲ್ಲಿ `overflow: hidden` ಇದ್ದರೆ ಮಾಡಲ್‌ನ ಭಾಗಗಳನ್ನು ಕತ್ತರಿಸಬಹುದು.
ಟೂಲ್‌ಟಿಪ್‌ಗಳು ಮತ್ತು ಪಾಪ್‌ಓವರ್‌ಗಳು: ಮಾಡಲ್‌ಗಳಂತೆಯೇ, ಟೂಲ್‌ಟಿಪ್‌ಗಳು ಅಥವಾ ಪಾಪ್‌ಓವರ್‌ಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಒಂದು ಎಲಿಮೆಂಟ್‌ಗೆ ಸಂಬಂಧಿಸಿದಂತೆ ತಮ್ಮನ್ನು ತಾವು ಇರಿಸಿಕೊಳ್ಳಬೇಕಾಗುತ್ತದೆ ಆದರೆ ಅವುಗಳ ಸಂಭಾವ್ಯವಾಗಿ ಸೀಮಿತವಾದ ಪೇರೆಂಟ್ ಗಡಿಗಳ ಹೊರಗೆ ಕಾಣಿಸಿಕೊಳ್ಳಬೇಕಾಗುತ್ತದೆ. ಪೇರೆಂಟ್‌ನಲ್ಲಿರುವ `overflow: hidden` ಟೂಲ್‌ಟಿಪ್ ಅನ್ನು ಕತ್ತರಿಸಬಹುದು.
ಅಧಿಸೂಚನೆಗಳು ಮತ್ತು ಟೋಸ್ಟ್ ಸಂದೇಶಗಳು: ಈ ಜಾಗತಿಕ ಸಂದೇಶಗಳು ಸಾಮಾನ್ಯವಾಗಿ ವ್ಯೂಪೋರ್ಟ್‌ನ ಮೇಲ್ಭಾಗದಲ್ಲಿ ಅಥವಾ ಕೆಳಭಾಗದಲ್ಲಿ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತವೆ, ಅವುಗಳನ್ನು ಪ್ರಚೋದಿಸಿದ ಕಾಂಪೊನೆಂಟ್‌ನಿಂದ ಸ್ವತಂತ್ರವಾಗಿ ರೆಂಡರ್ ಮಾಡಬೇಕಾಗುತ್ತದೆ.
ಕಾಂಟೆಕ್ಸ್ಟ್ ಮೆನುಗಳು: ಬಲ-ಕ್ಲಿಕ್ ಮೆನುಗಳು ಅಥವಾ ಕಸ್ಟಮ್ ಕಾಂಟೆಕ್ಸ್ಟ್ ಮೆನುಗಳು ಬಳಕೆದಾರರು ಕ್ಲಿಕ್ ಮಾಡಿದ ಸ್ಥಳದಲ್ಲಿ ನಿಖರವಾಗಿ ಕಾಣಿಸಿಕೊಳ್ಳಬೇಕಾಗುತ್ತದೆ, ಪೂರ್ಣ ಗೋಚರತೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಆಗಾಗ್ಗೆ ಸೀಮಿತ ಪೇರೆಂಟ್ ಕಂಟೇನರ್‌ಗಳಿಂದ ಹೊರಬರಬೇಕಾಗುತ್ತದೆ.
ಮೂರನೇ-ಪಕ್ಷದ ಇಂಟಿಗ್ರೇಷನ್‌ಗಳು: ಕೆಲವೊಮ್ಮೆ, ನೀವು ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಬಾಹ್ಯ ಲೈಬ್ರರಿ ಅಥವಾ ಹಳೆಯ ಕೋಡ್‌ನಿಂದ ನಿರ್ವಹಿಸಲ್ಪಡುವ DOM ನೋಡ್‌ಗೆ, ರಿಯಾಕ್ಟ್‌ನ ರೂಟ್‌ನ ಹೊರಗೆ, ರೆಂಡರ್ ಮಾಡಬೇಕಾಗಬಹುದು.

ಈ ಪ್ರತಿಯೊಂದು ಸನ್ನಿವೇಶಗಳಲ್ಲಿ, ಕೇವಲ стандарт ರಿಯಾಕ್ಟ್ ರೆಂಡರಿಂಗ್ ಬಳಸಿ ಬಯಸಿದ ದೃಶ್ಯ ಫಲಿತಾಂಶವನ್ನು ಸಾಧಿಸಲು ಪ್ರಯತ್ನಿಸುವುದು ಸಾಮಾನ್ಯವಾಗಿ ಸಂಕೀರ್ಣ CSS, ಅತಿಯಾದ `z-index` ಮೌಲ್ಯಗಳು, ಅಥವಾ ನಿರ್ವಹಿಸಲು ಮತ್ತು ಸ್ಕೇಲ್ ಮಾಡಲು ಕಷ್ಟಕರವಾದ ಸಂಕೀರ್ಣ ಪೊಸಿಶನಿಂಗ್ ಲಾಜಿಕ್‌ಗೆ ಕಾರಣವಾಗುತ್ತದೆ. ಇಲ್ಲಿಯೇ ರಿಯಾಕ್ಟ್ ಪೋರ್ಟಲ್‌ಗಳು ಸ್ವಚ್ಛ, ಮತ್ತು ಸಹಜವಾದ ಪರಿಹಾರವನ್ನು ನೀಡುತ್ತವೆ.

ರಿಯಾಕ್ಟ್ ಪೋರ್ಟಲ್ ಎಂದರೆ ನಿಖರವಾಗಿ ಏನು?

ರಿಯಾಕ್ಟ್ ಪೋರ್ಟಲ್, ಪೇರೆಂಟ್ ಕಾಂಪೊನೆಂಟ್‌ನ DOM ಕ್ರಮಾನುಗತದ ಹೊರಗೆ ಇರುವ DOM ನೋಡ್‌ಗೆ ಮಕ್ಕಳನ್ನು ರೆಂಡರ್ ಮಾಡಲು ಒಂದು ಪ್ರಥಮ ದರ್ಜೆಯ ಮಾರ್ಗವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಬೇರೆ ಭೌತಿಕ DOM ಎಲಿಮೆಂಟ್‌ನಲ್ಲಿ ರೆಂಡರ್ ಆದರೂ, ಪೋರ್ಟಲ್‌ನ ಕಂಟೆಂಟ್ ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್ ಟ್ರೀಯಲ್ಲಿ ನೇರ ಮಗುವಿನಂತೆ ವರ್ತಿಸುತ್ತದೆ. ಇದರರ್ಥ ಅದು ಅದೇ ರಿಯಾಕ್ಟ್ ಕಾಂಟೆಕ್ಸ್ಟ್ ಅನ್ನು (ಉದಾ., ಕಾಂಟೆಕ್ಸ್ಟ್ API ಮೌಲ್ಯಗಳು) ನಿರ್ವಹಿಸುತ್ತದೆ ಮತ್ತು ರಿಯಾಕ್ಟ್‌ನ ಈವೆಂಟ್ ಬಬ್ಲಿಂಗ್ ಸಿಸ್ಟಮ್‌ನಲ್ಲಿ ಭಾಗವಹಿಸುತ್ತದೆ.

ರಿಯಾಕ್ಟ್ ಪೋರ್ಟಲ್‌ಗಳ ತಿರುಳು `ReactDOM.createPortal()` ಮೆಥಡ್‌ನಲ್ಲಿದೆ. ಅದರ ಸಿಗ್ನೇಚರ್ ಸರಳವಾಗಿದೆ:

ReactDOM.createPortal(child, container)

child: ಯಾವುದೇ ರೆಂಡರ್ ಮಾಡಬಹುದಾದ ರಿಯಾಕ್ಟ್ ಚೈಲ್ಡ್, ಉದಾಹರಣೆಗೆ ಎಲಿಮೆಂಟ್, ಸ್ಟ್ರಿಂಗ್, ಅಥವಾ ಫ್ರಾಗ್ಮೆಂಟ್.
container: ಡಾಕ್ಯುಮೆಂಟ್‌ನಲ್ಲಿ ಈಗಾಗಲೇ ಇರುವ DOM ಎಲಿಮೆಂಟ್. ಇದು `child` ರೆಂಡರ್ ಆಗುವ ಟಾರ್ಗೆಟ್ DOM ನೋಡ್ ಆಗಿದೆ.

ನೀವು `ReactDOM.createPortal()` ಬಳಸಿದಾಗ, ರಿಯಾಕ್ಟ್ ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ `container` DOM ನೋಡ್‌ನ ಅಡಿಯಲ್ಲಿ ಹೊಸ ವರ್ಚುವಲ್ DOM ಸಬ್‌ಟ್ರೀಯನ್ನು ರಚಿಸುತ್ತದೆ. ಆದಾಗ್ಯೂ, ಈ ಹೊಸ ಸಬ್‌ಟ್ರೀಯು ಪೋರ್ಟಲ್ ಅನ್ನು ರಚಿಸಿದ ಕಾಂಪೊನೆಂಟ್‌ಗೆ ತಾರ್ಕಿಕವಾಗಿ ಸಂಪರ್ಕಗೊಂಡಿರುತ್ತದೆ. ಈವೆಂಟ್ ಬಬ್ಲಿಂಗ್ ಮತ್ತು ಕಾಂಟೆಕ್ಸ್ಟ್ ನಿರೀಕ್ಷೆಯಂತೆ ಏಕೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಈ "ತಾರ್ಕಿಕ ಸಂಪರ್ಕ" ಮುಖ್ಯವಾಗಿದೆ.

ನಿಮ್ಮ ಮೊದಲ ರಿಯಾಕ್ಟ್ ಪೋರ್ಟಲ್ ಅನ್ನು ಸ್ಥಾಪಿಸುವುದು: ಒಂದು ಸರಳ ಮಾಡಲ್ ಉದಾಹರಣೆ

ಒಂದು ಸಾಮಾನ್ಯ ಬಳಕೆಯ ಪ್ರಕರಣವನ್ನು ನೋಡೋಣ: ಮಾಡಲ್ ಡೈಲಾಗ್ ಅನ್ನು ರಚಿಸುವುದು. ಪೋರ್ಟಲ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು, ಮೊದಲು ನಿಮ್ಮ `index.html` ನಲ್ಲಿ (ಅಥವಾ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ರೂಟ್ HTML ಫೈಲ್ ಎಲ್ಲಿದೆಯೋ ಅಲ್ಲಿ) ಪೋರ್ಟಲ್ ಕಂಟೆಂಟ್ ರೆಂಡರ್ ಆಗುವ ಒಂದು ಟಾರ್ಗೆಟ್ DOM ಎಲಿಮೆಂಟ್ ಬೇಕು.

ಹಂತ 1: ಟಾರ್ಗೆಟ್ DOM ನೋಡ್ ಅನ್ನು ಸಿದ್ಧಪಡಿಸಿ

ನಿಮ್ಮ `public/index.html` ಫೈಲ್ (ಅಥವಾ ಅದಕ್ಕೆ ಸಮಾನವಾದ) ತೆರೆಯಿರಿ ಮತ್ತು ಹೊಸ `div` ಎಲಿಮೆಂಟ್ ಅನ್ನು ಸೇರಿಸಿ. ಇದನ್ನು ನಿಮ್ಮ ಮುಖ್ಯ ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್ ರೂಟ್‌ನ ಹೊರಗೆ, `body` ಟ್ಯಾಗ್ ಮುಚ್ಚುವ ಮೊದಲು ಸೇರಿಸುವುದು ಸಾಮಾನ್ಯ ಅಭ್ಯಾಸ.


<body>
  <!-- ನಿಮ್ಮ ಮುಖ್ಯ ರಿಯಾಕ್ಟ್ ಆ್ಯಪ್ ರೂಟ್ -->
  <div id="root"></div>

  <!-- ನಮ್ಮ ಪೋರ್ಟಲ್ ಕಂಟೆಂಟ್ ಇಲ್ಲಿ ರೆಂಡರ್ ಆಗುತ್ತದೆ -->
  <div id="modal-root"></div>
</body>

ಹಂತ 2: ಪೋರ್ಟಲ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ರಚಿಸಿ

ಈಗ, ಪೋರ್ಟಲ್ ಬಳಸುವ ಒಂದು ಸರಳ ಮಾಡಲ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ರಚಿಸೋಣ.


// Modal.js
import React, { useEffect, useRef } from 'react';
import ReactDOM from 'react-dom';

const modalRoot = document.getElementById('modal-root');

const Modal = ({ children, isOpen, onClose }) => {
  const el = useRef(document.createElement('div'));

  useEffect(() => {
    // ಕಾಂಪೊನೆಂಟ್ ಮೌಂಟ್ ಆದಾಗ ಡಿವ್ ಅನ್ನು ಮಾಡಲ್ ರೂಟ್‌ಗೆ ಸೇರಿಸಿ
    modalRoot.appendChild(el.current);

    // ಕ್ಲೀನ್ ಅಪ್: ಕಾಂಪೊನೆಂಟ್ ಅನ್‌ಮೌಂಟ್ ಆದಾಗ ಡಿವ್ ಅನ್ನು ತೆಗೆದುಹಾಕಿ
    return () => {
      modalRoot.removeChild(el.current);
    };
  }, []); // ಖಾಲಿ ಡಿಪೆಂಡೆನ್ಸಿ ಅರೇ ಎಂದರೆ ಇದು ಮೌಂಟ್ ಆದಾಗ ಒಮ್ಮೆ ಮತ್ತು ಅನ್‌ಮೌಂಟ್ ಆದಾಗ ಒಮ್ಮೆ ರನ್ ಆಗುತ್ತದೆ

  if (!isOpen) {
    return null; // ಮಾಡಲ್ ತೆರೆದಿಲ್ಲದಿದ್ದರೆ ಏನನ್ನೂ ರೆಂಡರ್ ಮಾಡಬೇಡಿ
  }

  return ReactDOM.createPortal(
    <div style={{
      position: 'fixed',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      backgroundColor: 'rgba(0, 0, 0, 0.5)',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      zIndex: 1000 // ಇದು ಮೇಲಿರುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ
    }}>
      <div style={{
        backgroundColor: 'white',
        padding: '20px',
        borderRadius: '8px',
        boxShadow: '0 4px 8px rgba(0, 0, 0, 0.2)',
        maxWidth: '500px',
        width: '90%'
      }}>
        {children}
        <button onClick={onClose} style={{ marginTop: '15px' }}>ಮಾಡಲ್ ಮುಚ್ಚಿ</button>
      </div>
    </div>,
    el.current // ಮಾಡಲ್ ಕಂಟೆಂಟ್ ಅನ್ನು ನಾವು ರಚಿಸಿದ ಡಿವ್‌ಗೆ ರೆಂಡರ್ ಮಾಡಿ, ಅದು modalRoot ಒಳಗೆ ಇದೆ
  );
};

export default Modal;

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ನಾವು ಪ್ರತಿ ಮಾಡಲ್ ಇನ್‌ಸ್ಟಾನ್ಸ್‌ಗೆ (`el.current`) ಹೊಸ `div` ಎಲಿಮೆಂಟ್ ಅನ್ನು ರಚಿಸಿ ಅದನ್ನು `modal-root` ಗೆ ಸೇರಿಸುತ್ತೇವೆ. ಇದು ಅಗತ್ಯವಿದ್ದಲ್ಲಿ, ಒಂದಕ್ಕೊಂದು ಲೈಫ್‌ಸೈಕಲ್ ಅಥವಾ ಕಂಟೆಂಟ್‌ನೊಂದಿಗೆ ಹಸ್ತಕ್ಷೇಪ ಮಾಡದೆಯೇ ಅನೇಕ ಮಾಡಲ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸಲು ನಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ನಿಜವಾದ ಮಾಡಲ್ ಕಂಟೆಂಟ್ (ಓವರ್‌ಲೇ ಮತ್ತು ಬಿಳಿ ಬಾಕ್ಸ್) ನಂತರ `ReactDOM.createPortal` ಬಳಸಿ ಈ `el.current` ಗೆ ರೆಂಡರ್ ಆಗುತ್ತದೆ.

ಹಂತ 3: ಮಾಡಲ್ ಕಾಂಪೊನೆಂಟ್ ಬಳಸಿ


// App.js
import React, { useState } from 'react';
import Modal from './Modal'; // Modal.js ಅದೇ ಡೈರೆಕ್ಟರಿಯಲ್ಲಿದೆ ಎಂದು ಭಾವಿಸಿ

function App() {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleOpenModal = () => setIsModalOpen(true);
  const handleCloseModal = () => setIsModalOpen(false);

  return (
    <div style={{ padding: '20px' }}>
      <h1>ರಿಯಾಕ್ಟ್ ಪೋರ್ಟಲ್ ಉದಾಹರಣೆ</h1>
      <p>ಈ ಕಂಟೆಂಟ್ ಮುಖ್ಯ ಅಪ್ಲಿಕೇಶನ್ ಟ್ರೀಯ ಭಾಗವಾಗಿದೆ.</p>
      <button onClick={handleOpenModal}>ಗ್ಲೋಬಲ್ ಮಾಡಲ್ ತೆರೆಯಿರಿ</button>

      <Modal isOpen={isModalOpen} onClose={handleCloseModal}>
        <h3>ಪೋರ್ಟಲ್‌ನಿಂದ ಶುಭಾಶಯಗಳು!</h3>
        <p>ಈ ಮಾಡಲ್ ಕಂಟೆಂಟ್ 'root' ಡಿವ್‌ನ ಹೊರಗೆ ರೆಂಡರ್ ಆಗಿದೆ, ಆದರೆ ಇನ್ನೂ ರಿಯಾಕ್ಟ್‌ನಿಂದ ನಿರ್ವಹಿಸಲ್ಪಡುತ್ತದೆ.</p>
      </Modal>
    </div>
  );
}

export default App;

`Modal` ಕಾಂಪೊನೆಂಟ್ `App` ಕಾಂಪೊನೆಂಟ್ ಒಳಗೆ ರೆಂಡರ್ ಆಗಿದ್ದರೂ (ಅದು ಸ್ವತಃ `root` ಡಿವ್ ಒಳಗೆ ಇದೆ), ಅದರ ನಿಜವಾದ DOM ಔಟ್‌ಪುಟ್ `modal-root` ಡಿವ್ ಒಳಗೆ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ. ಇದು ಮಾಡಲ್ `z-index` ಅಥವಾ `overflow` ಸಮಸ್ಯೆಗಳಿಲ್ಲದೆ ಎಲ್ಲವನ್ನೂ ಓವರ್‌ಲೇ ಮಾಡುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ, ಮತ್ತು ಅದೇ ಸಮಯದಲ್ಲಿ ರಿಯಾಕ್ಟ್‌ನ ಸ್ಟೇಟ್ ಮ್ಯಾನೇಜ್‌ಮೆಂಟ್ ಮತ್ತು ಕಾಂಪೊನೆಂಟ್ ಲೈಫ್‌ಸೈಕಲ್‌ನ ಪ್ರಯೋಜನವನ್ನು ಪಡೆಯುತ್ತದೆ.

ರಿಯಾಕ್ಟ್ ಪೋರ್ಟಲ್‌ಗಳ ಪ್ರಮುಖ ಬಳಕೆಯ ಪ್ರಕರಣಗಳು ಮತ್ತು ಸುಧಾರಿತ ಅನ್ವಯಗಳು

ಮಾಡಲ್‌ಗಳು ಒಂದು ಶ್ರೇಷ್ಠ ಉದಾಹರಣೆಯಾಗಿದ್ದರೂ, ರಿಯಾಕ್ಟ್ ಪೋರ್ಟಲ್‌ಗಳ ಉಪಯುಕ್ತತೆಯು ಸರಳ ಪಾಪ್-ಅಪ್‌ಗಳನ್ನು ಮೀರಿ ವಿಸ್ತರಿಸುತ್ತದೆ. ಪೋರ್ಟಲ್‌ಗಳು ಸೊಗಸಾದ ಪರಿಹಾರಗಳನ್ನು ಒದಗಿಸುವ ಹೆಚ್ಚು ಸುಧಾರಿತ ಸನ್ನಿವೇಶಗಳನ್ನು ಅನ್ವೇಷಿಸೋಣ.

1. ದೃಢವಾದ ಮಾಡಲ್‌ಗಳು ಮತ್ತು ಡೈಲಾಗ್ ಸಿಸ್ಟಮ್‌ಗಳು

ನೋಡಿದಂತೆ, ಪೋರ್ಟಲ್‌ಗಳು ಮಾಡಲ್ ಅನುಷ್ಠಾನವನ್ನು ಸರಳಗೊಳಿಸುತ್ತವೆ. ಪ್ರಮುಖ ಅನುಕೂಲಗಳು ಸೇರಿವೆ:

ಖಚಿತವಾದ Z-Index: `body` ಮಟ್ಟದಲ್ಲಿ (ಅಥವಾ ಮೀಸಲಾದ ಉನ್ನತ-ಮಟ್ಟದ ಕಂಟೇನರ್) ರೆಂಡರ್ ಮಾಡುವ ಮೂಲಕ, ಮಾಡಲ್‌ಗಳು ಆಳವಾಗಿ ನೆಸ್ಟ್ ಮಾಡಲಾದ CSS ಕಾಂಟೆಕ್ಸ್ಟ್‌ಗಳೊಂದಿಗೆ ಹೋರಾಡದೆಯೇ ಯಾವಾಗಲೂ ಅತ್ಯುನ್ನತ `z-index` ಅನ್ನು ಸಾಧಿಸಬಹುದು. ಇದು ಅವುಗಳನ್ನು ಪ್ರಚೋದಿಸಿದ ಕಾಂಪೊನೆಂಟ್ ಯಾವುದು ಎಂಬುದನ್ನು ಲೆಕ್ಕಿಸದೆ, ಎಲ್ಲಾ ಇತರ ಕಂಟೆಂಟ್‌ನ ಮೇಲೆ ಸ್ಥಿರವಾಗಿ ಕಾಣಿಸಿಕೊಳ್ಳುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.
ಓವರ್‌ಫ್ಲೋನಿಂದ ಪಾರಾಗುವುದು: `overflow: hidden` ಅಥವಾ `overflow: auto` ಇರುವ ಪೇರೆಂಟ್‌ಗಳು ಇನ್ನು ಮುಂದೆ ಮಾಡಲ್ ಕಂಟೆಂಟ್ ಅನ್ನು ಕತ್ತರಿಸುವುದಿಲ್ಲ. ದೊಡ್ಡ ಮಾಡಲ್‌ಗಳಿಗೆ ಅಥವಾ ಡೈನಾಮಿಕ್ ಕಂಟೆಂಟ್ ಹೊಂದಿರುವವುಗಳಿಗೆ ಇದು ನಿರ್ಣಾಯಕವಾಗಿದೆ.
ಪ್ರವೇಶಸಾಧ್ಯತೆ (A11y): ಪ್ರವೇಶಸಾಧ್ಯ ಮಾಡಲ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಪೋರ್ಟಲ್‌ಗಳು ಮೂಲಭೂತವಾಗಿವೆ. DOM ರಚನೆಯು ಪ್ರತ್ಯೇಕವಾಗಿದ್ದರೂ, ತಾರ್ಕಿಕ ರಿಯಾಕ್ಟ್ ಟ್ರೀ ಸಂಪರ್ಕವು ಸರಿಯಾದ ಫೋಕಸ್ ಮ್ಯಾನೇಜ್‌ಮೆಂಟ್ (ಮಾಡಲ್ ಒಳಗೆ ಫೋಕಸ್ ಅನ್ನು ಹಿಡಿದಿಡುವುದು) ಮತ್ತು ARIA ಅಟ್ರಿಬ್ಯೂಟ್‌ಗಳನ್ನು (ಉದಾಹರಣೆಗೆ `aria-modal`) ಸರಿಯಾಗಿ ಅನ್ವಯಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. `react-focus-lock` ಅಥವಾ `@reach/dialog` ನಂತಹ ಲೈಬ್ರರಿಗಳು ಈ ಉದ್ದೇಶಕ್ಕಾಗಿ ಪೋರ್ಟಲ್‌ಗಳನ್ನು ವ್ಯಾಪಕವಾಗಿ ಬಳಸುತ್ತವೆ.

2. ಡೈನಾಮಿಕ್ ಟೂಲ್‌ಟಿಪ್‌ಗಳು, ಪಾಪ್‌ಓವರ್‌ಗಳು ಮತ್ತು ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳು

ಮಾಡಲ್‌ಗಳಂತೆಯೇ, ಈ ಎಲಿಮೆಂಟ್‌ಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಒಂದು ಟ್ರಿಗರ್ ಎಲಿಮೆಂಟ್‌ನ ಪಕ್ಕದಲ್ಲಿ ಕಾಣಿಸಿಕೊಳ್ಳಬೇಕಾಗುತ್ತದೆ ಆದರೆ ಸೀಮಿತ ಪೇರೆಂಟ್ ಲೇಔಟ್‌ಗಳಿಂದ ಹೊರಬರಬೇಕಾಗುತ್ತದೆ.

ನಿಖರವಾದ ಪೊಸಿಶನಿಂಗ್: ನೀವು ವ್ಯೂಪೋರ್ಟ್‌ಗೆ ಸಂಬಂಧಿಸಿದಂತೆ ಟ್ರಿಗರ್ ಎಲಿಮೆಂಟ್‌ನ ಪೊಸಿಶನ್ ಅನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡಬಹುದು ಮತ್ತು ನಂತರ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಸಿ ಟೂಲ್‌ಟಿಪ್ ಅನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಪೊಸಿಶನ್ ಮಾಡಬಹುದು. ಅದನ್ನು ಪೋರ್ಟಲ್ ಮೂಲಕ ರೆಂಡರ್ ಮಾಡುವುದರಿಂದ ಯಾವುದೇ ಮಧ್ಯಂತರ ಪೇರೆಂಟ್‌ನಲ್ಲಿ `overflow` ಪ್ರಾಪರ್ಟಿಯಿಂದ ಅದು ಕತ್ತರಿಸಲ್ಪಡುವುದಿಲ್ಲ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.
ಲೇಔಟ್ ಶಿಫ್ಟ್‌ಗಳನ್ನು ತಪ್ಪಿಸುವುದು: ಒಂದು ವೇಳೆ ಟೂಲ್‌ಟಿಪ್ ಇನ್‌ಲೈನ್‌ನಲ್ಲಿ ರೆಂಡರ್ ಆಗಿದ್ದರೆ, ಅದರ ಉಪಸ್ಥಿತಿಯು ಅದರ ಪೇರೆಂಟ್‌ನಲ್ಲಿ ಲೇಔಟ್ ಶಿಫ್ಟ್‌ಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು. ಪೋರ್ಟಲ್‌ಗಳು ಅದರ ರೆಂಡರಿಂಗ್ ಅನ್ನು ಪ್ರತ್ಯೇಕಿಸಿ, ಅನಪೇಕ್ಷಿತ ರಿಫ್ಲೋಗಳನ್ನು ತಡೆಯುತ್ತವೆ.

3. ಗ್ಲೋಬಲ್ ಅಧಿಸೂಚನೆಗಳು ಮತ್ತು ಟೋಸ್ಟ್ ಸಂದೇಶಗಳು

ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ ಆಗಾಗ್ಗೆ ನಾನ್-ಬ್ಲಾಕಿಂಗ್, ಅಲ್ಪಕಾಲಿಕ ಸಂದೇಶಗಳನ್ನು (ಉದಾ., "ಐಟಂ ಕಾರ್ಟ್‌ಗೆ ಸೇರಿಸಲಾಗಿದೆ!", "ನೆಟ್‌ವರ್ಕ್ ಸಂಪರ್ಕ ಕಳೆದುಹೋಗಿದೆ") ಪ್ರದರ್ಶಿಸಲು ಒಂದು ಸಿಸ್ಟಮ್ ಅಗತ್ಯವಿರುತ್ತದೆ.

ಕೇಂದ್ರೀಕೃತ ನಿರ್ವಹಣೆ: ಒಂದೇ "ToastProvider" ಕಾಂಪೊನೆಂಟ್ ಟೋಸ್ಟ್ ಸಂದೇಶಗಳ ಸರದಿಯನ್ನು ನಿರ್ವಹಿಸಬಹುದು. ಈ ಪ್ರೊವೈಡರ್ `body` ಯ ಮೇಲ್ಭಾಗದಲ್ಲಿ ಅಥವಾ ಕೆಳಭಾಗದಲ್ಲಿರುವ ಮೀಸಲಾದ `div` ಗೆ ಎಲ್ಲಾ ಸಂದೇಶಗಳನ್ನು ರೆಂಡರ್ ಮಾಡಲು ಪೋರ್ಟಲ್ ಅನ್ನು ಬಳಸಬಹುದು, ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ಸಂದೇಶವು ಎಲ್ಲಿ ಪ್ರಚೋದಿಸಲ್ಪಟ್ಟಿದೆ ಎಂಬುದನ್ನು ಲೆಕ್ಕಿಸದೆ ಅವು ಯಾವಾಗಲೂ ಗೋಚರಿಸುವಂತೆ ಮತ್ತು ಸ್ಥಿರವಾಗಿ ಸ್ಟೈಲ್ ಆಗಿರುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.
ಸ್ಥಿರತೆ: ಒಂದು ಸಂಕೀರ್ಣ ಅಪ್ಲಿಕೇಶನ್‌ನಾದ್ಯಂತ ಎಲ್ಲಾ ಅಧಿಸೂಚನೆಗಳು ಏಕರೂಪವಾಗಿ ಕಾಣುವಂತೆ ಮತ್ತು ವರ್ತಿಸುವಂತೆ ಖಚಿತಪಡಿಸುತ್ತದೆ.

4. ಕಸ್ಟಮ್ ಕಾಂಟೆಕ್ಸ್ಟ್ ಮೆನುಗಳು

ಬಳಕೆದಾರರು ಒಂದು ಎಲಿಮೆಂಟ್ ಮೇಲೆ ಬಲ-ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ, ಸಾಮಾನ್ಯವಾಗಿ ಕಾಂಟೆಕ್ಸ್ಟ್ ಮೆನು ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ. ಈ ಮೆನು ಕರ್ಸರ್ ಇರುವ ಸ್ಥಳದಲ್ಲಿ ನಿಖರವಾಗಿ ಪೊಸಿಶನ್ ಆಗಬೇಕು ಮತ್ತು ಎಲ್ಲಾ ಇತರ ಕಂಟೆಂಟ್ ಅನ್ನು ಓವರ್‌ಲೇ ಮಾಡಬೇಕು. ಇಲ್ಲಿ ಪೋರ್ಟಲ್‌ಗಳು ಸೂಕ್ತವಾಗಿವೆ:

ಮೆನು ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಪೋರ್ಟಲ್ ಮೂಲಕ ರೆಂಡರ್ ಮಾಡಬಹುದು, ಅದು ಕ್ಲಿಕ್ ಕೋಆರ್ಡಿನೇಟ್‌ಗಳನ್ನು ಪಡೆಯುತ್ತದೆ.
ಇದು ಕ್ಲಿಕ್ ಮಾಡಿದ ಎಲಿಮೆಂಟ್‌ನ ಪೇರೆಂಟ್ ಕ್ರಮಾನುಗತದಿಂದ ನಿರ್ಬಂಧಿಸಲ್ಪಡದೆ, ಅಗತ್ಯವಿರುವ ಸ್ಥಳದಲ್ಲಿ ನಿಖರವಾಗಿ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ.

5. ಮೂರನೇ-ಪಕ್ಷದ ಲೈಬ್ರರಿಗಳು ಅಥವಾ ನಾನ್-ರಿಯಾಕ್ಟ್ DOM ಎಲಿಮೆಂಟ್‌ಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸುವುದು

ನಿಮ್ಮಲ್ಲಿ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಅಪ್ಲಿಕೇಶನ್ ಇದೆ ಎಂದು ಊಹಿಸಿಕೊಳ್ಳಿ, ಅಲ್ಲಿ UI ನ ಒಂದು ಭಾಗವನ್ನು ಹಳೆಯ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಲೈಬ್ರರಿ ಅಥವಾ ತನ್ನದೇ ಆದ DOM ನೋಡ್‌ಗಳನ್ನು ಬಳಸುವ ಕಸ್ಟಮ್ ಮ್ಯಾಪಿಂಗ್ ಪರಿಹಾರವು ನಿರ್ವಹಿಸುತ್ತದೆ. ಅಂತಹ ಬಾಹ್ಯ DOM ನೋಡ್‌ನೊಳಗೆ ನೀವು ಒಂದು ಸಣ್ಣ, ಸಂವಾದಾತ್ಮಕ ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ರೆಂಡರ್ ಮಾಡಲು ಬಯಸಿದರೆ, `ReactDOM.createPortal` ನಿಮ್ಮ ಸೇತುವೆಯಾಗಿದೆ.

ನೀವು ಮೂರನೇ-ಪಕ್ಷದ ನಿಯಂತ್ರಿತ ಪ್ರದೇಶದೊಳಗೆ ಟಾರ್ಗೆಟ್ DOM ನೋಡ್ ಅನ್ನು ರಚಿಸಬಹುದು.
ನಂತರ, ಆ ನಿರ್ದಿಷ್ಟ DOM ನೋಡ್‌ಗೆ ನಿಮ್ಮ ರಿಯಾಕ್ಟ್ UI ಅನ್ನು ಇಂಜೆಕ್ಟ್ ಮಾಡಲು ಪೋರ್ಟಲ್‌ನೊಂದಿಗೆ ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಬಳಸಿ, ರಿಯಾಕ್ಟ್‌ನ ಡಿಕ್ಲರೇಟಿವ್ ಶಕ್ತಿಯು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ನಾನ್-ರಿಯಾಕ್ಟ್ ಭಾಗಗಳನ್ನು ಹೆಚ್ಚಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

ರಿಯಾಕ್ಟ್ ಪೋರ್ಟಲ್‌ಗಳನ್ನು ಬಳಸುವಾಗ ಸುಧಾರಿತ ಪರಿಗಣನೆಗಳು

ಪೋರ್ಟಲ್‌ಗಳು ಸಂಕೀರ್ಣ ರೆಂಡರಿಂಗ್ ಸಮಸ್ಯೆಗಳನ್ನು ಪರಿಹರಿಸುತ್ತವೆಯಾದರೂ, ಅವುಗಳನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಬಳಸಲು ಮತ್ತು ಸಾಮಾನ್ಯ ಅಪಾಯಗಳನ್ನು ತಪ್ಪಿಸಲು ಅವು ಇತರ ರಿಯಾಕ್ಟ್ ವೈಶಿಷ್ಟ್ಯಗಳು ಮತ್ತು DOM ನೊಂದಿಗೆ ಹೇಗೆ ಸಂವಹನ ನಡೆಸುತ್ತವೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ನಿರ್ಣಾಯಕವಾಗಿದೆ.

1. ಈವೆಂಟ್ ಬಬ್ಲಿಂಗ್: ಒಂದು ನಿರ್ಣಾಯಕ ವ್ಯತ್ಯಾಸ

ರಿಯಾಕ್ಟ್ ಪೋರ್ಟಲ್‌ಗಳ ಅತ್ಯಂತ ಶಕ್ತಿಶಾಲಿ ಮತ್ತು ಆಗಾಗ್ಗೆ ತಪ್ಪಾಗಿ ಅರ್ಥೈಸಿಕೊಳ್ಳುವ ಅಂಶವೆಂದರೆ ಈವೆಂಟ್ ಬಬ್ಲಿಂಗ್‌ಗೆ ಸಂಬಂಧಿಸಿದಂತೆ ಅವುಗಳ ವರ್ತನೆ. ಸಂಪೂರ್ಣವಾಗಿ ವಿಭಿನ್ನ DOM ನೋಡ್‌ಗೆ ರೆಂಡರ್ ಆಗಿದ್ದರೂ, ಪೋರ್ಟಲ್‌ನೊಳಗಿನ ಎಲಿಮೆಂಟ್‌ಗಳಿಂದ ಫೈರ್ ಆಗುವ ಈವೆಂಟ್‌ಗಳು, ಪೋರ್ಟಲ್ ಇಲ್ಲದಿದ್ದಂತೆ ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್ ಟ್ರೀ ಮೂಲಕ ಮೇಲಕ್ಕೆ ಬಬಲ್ ಆಗುತ್ತವೆ. ಏಕೆಂದರೆ ರಿಯಾಕ್ಟ್‌ನ ಈವೆಂಟ್ ಸಿಸ್ಟಮ್ ಸಿಂಥೆಟಿಕ್ ಆಗಿದ್ದು, ಹೆಚ್ಚಿನ ಸಂದರ್ಭಗಳಲ್ಲಿ ನೇಟಿವ್ DOM ಈವೆಂಟ್ ಬಬ್ಲಿಂಗ್‌ನಿಂದ ಸ್ವತಂತ್ರವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.

ಇದರ ಅರ್ಥವೇನು: ನಿಮ್ಮ ಪೋರ್ಟಲ್ ಒಳಗೆ ಒಂದು ಬಟನ್ ಇದ್ದರೆ, ಮತ್ತು ಆ ಬಟನ್‌ನ ಕ್ಲಿಕ್ ಈವೆಂಟ್ ಬಬಲ್ ಅಪ್ ಆದರೆ, ಅದು ಅದರ DOM ಪೇರೆಂಟ್‌ನ ಬದಲಾಗಿ, ರಿಯಾಕ್ಟ್ ಟ್ರೀಯಲ್ಲಿನ ಅದರ ತಾರ್ಕಿಕ ಪೇರೆಂಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳ ಯಾವುದೇ `onClick` ಹ್ಯಾಂಡ್ಲರ್‌ಗಳನ್ನು ಪ್ರಚೋದಿಸುತ್ತದೆ.
ಉದಾಹರಣೆ: ನಿಮ್ಮ `Modal` ಕಾಂಪೊನೆಂಟ್ `App` ನಿಂದ ರೆಂಡರ್ ಆಗಿದ್ದರೆ, `Modal` ಒಳಗೆ ಒಂದು ಕ್ಲಿಕ್, ಕಾನ್ಫಿಗರ್ ಮಾಡಿದ್ದರೆ, `App` ನ ಈವೆಂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳಿಗೆ ಬಬಲ್ ಅಪ್ ಆಗುತ್ತದೆ. ಇದು ರಿಯಾಕ್ಟ್‌ನಲ್ಲಿ ನೀವು ನಿರೀಕ್ಷಿಸುವ ಸಹಜ ಈವೆಂಟ್ ಫ್ಲೋ ಅನ್ನು ಸಂರಕ್ಷಿಸುವುದರಿಂದ ಇದು ಅತ್ಯಂತ ಪ್ರಯೋಜನಕಾರಿಯಾಗಿದೆ.
ನೇಟಿವ್ DOM ಈವೆಂಟ್‌ಗಳು: ನೀವು ನೇರವಾಗಿ ನೇಟಿವ್ DOM ಈವೆಂಟ್ ಲಿಸನರ್‌ಗಳನ್ನು ಲಗತ್ತಿಸಿದರೆ (ಉದಾ., `document.body` ಮೇಲೆ `addEventListener` ಬಳಸಿ), ಅವು ನೇಟಿವ್ DOM ಟ್ರೀಯನ್ನು ಅನುಸರಿಸುತ್ತವೆ. ಆದಾಗ್ಯೂ, стандарт ರಿಯಾಕ್ಟ್ ಸಿಂಥೆಟಿಕ್ ಈವೆಂಟ್‌ಗಳಿಗೆ (`onClick`, `onChange`, ಇತ್ಯಾದಿ), ರಿಯಾಕ್ಟ್ ತಾರ್ಕಿಕ ಟ್ರೀ ಮೇಲುಗೈ ಸಾಧಿಸುತ್ತದೆ.

2. ಕಾಂಟೆಕ್ಸ್ಟ್ API ಮತ್ತು ಪೋರ್ಟಲ್‌ಗಳು

ಕಾಂಟೆಕ್ಸ್ಟ್ API, ಪ್ರಾಪ್-ಡ್ರಿಲ್ಲಿಂಗ್ ಇಲ್ಲದೆ ಕಾಂಪೊನೆಂಟ್ ಟ್ರೀಯಾದ್ಯಂತ ಮೌಲ್ಯಗಳನ್ನು (ಥೀಮ್‌ಗಳು, ಬಳಕೆದಾರರ ದೃಢೀಕರಣ ಸ್ಥಿತಿಯಂತಹ) ಹಂಚಿಕೊಳ್ಳಲು ರಿಯಾಕ್ಟ್‌ನ ಯಾಂತ್ರಿಕತೆಯಾಗಿದೆ. ಅದೃಷ್ಟವಶಾತ್, ಕಾಂಟೆಕ್ಸ್ಟ್ ಪೋರ್ಟಲ್‌ಗಳೊಂದಿಗೆ ಮನಬಂದಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.

ಪೋರ್ಟಲ್ ಮೂಲಕ ರೆಂಡರ್ ಆದ ಕಾಂಪೊನೆಂಟ್, ಅದರ ತಾರ್ಕಿಕ ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್ ಟ್ರೀಯಲ್ಲಿನ ಪೂರ್ವಜರಾದ ಕಾಂಟೆಕ್ಸ್ಟ್ ಪ್ರೊವೈಡರ್‌ಗಳಿಗೆ ಇನ್ನೂ ಪ್ರವೇಶವನ್ನು ಹೊಂದಿರುತ್ತದೆ.
ಇದರರ್ಥ ನಿಮ್ಮ `App` ಕಾಂಪೊನೆಂಟ್‌ನ ಮೇಲ್ಭಾಗದಲ್ಲಿ `ThemeProvider` ಅನ್ನು ನೀವು ಹೊಂದಬಹುದು, ಮತ್ತು ಪೋರ್ಟಲ್ ಮೂಲಕ ರೆಂಡರ್ ಆದ ಮಾಡಲ್ ಆ ಥೀಮ್ ಕಾಂಟೆಕ್ಸ್ಟ್ ಅನ್ನು ಇನ್ನೂ ಆನುವಂಶಿಕವಾಗಿ ಪಡೆಯುತ್ತದೆ, ಇದು ಪೋರ್ಟಲ್ ಕಂಟೆಂಟ್‌ಗಾಗಿ ಜಾಗತಿಕ ಸ್ಟೈಲಿಂಗ್ ಮತ್ತು ಸ್ಟೇಟ್ ಮ್ಯಾನೇಜ್‌ಮೆಂಟ್ ಅನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆ.

3. ಪೋರ್ಟಲ್‌ಗಳೊಂದಿಗೆ ಪ್ರವೇಶಸಾಧ್ಯತೆ (A11y)

ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗೆ ಪ್ರವೇಶಸಾಧ್ಯ UI ಗಳನ್ನು ನಿರ್ಮಿಸುವುದು ಅತಿಮುಖ್ಯ, ಮತ್ತು ಪೋರ್ಟಲ್‌ಗಳು ನಿರ್ದಿಷ್ಟ A11y ಪರಿಗಣನೆಗಳನ್ನು ಪರಿಚಯಿಸುತ್ತವೆ, ವಿಶೇಷವಾಗಿ ಮಾಡಲ್‌ಗಳು ಮತ್ತು ಡೈಲಾಗ್‌ಗಳಿಗೆ.

ಫೋಕಸ್ ಮ್ಯಾನೇಜ್‌ಮೆಂಟ್: ಒಂದು ಮಾಡಲ್ ತೆರೆದಾಗ, ಬಳಕೆದಾರರು (ವಿಶೇಷವಾಗಿ ಕೀಬೋರ್ಡ್ ಮತ್ತು ಸ್ಕ್ರೀನ್ ರೀಡರ್ ಬಳಕೆದಾರರು) ಅದರ ಹಿಂದಿನ ಎಲಿಮೆಂಟ್‌ಗಳೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸುವುದನ್ನು ತಡೆಯಲು ಫೋಕಸ್ ಅನ್ನು ಮಾಡಲ್ ಒಳಗೆ ಹಿಡಿದಿಡಬೇಕು. ಮಾಡಲ್ ಮುಚ್ಚಿದಾಗ, ಫೋಕಸ್ ಅದನ್ನು ಪ್ರಚೋದಿಸಿದ ಎಲಿಮೆಂಟ್‌ಗೆ ಹಿಂತಿರುಗಬೇಕು. ಇದಕ್ಕೆ ಆಗಾಗ್ಗೆ ಎಚ್ಚರಿಕೆಯ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ನಿರ್ವಹಣೆ ಬೇಕಾಗುತ್ತದೆ (ಉದಾ., ಫೋಕಸ್ ಮಾಡಬಹುದಾದ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸಲು `useRef` ಬಳಸುವುದು, ಅಥವಾ `react-focus-lock` ನಂತಹ ಮೀಸಲಾದ ಲೈಬ್ರರಿ).
ಕೀಬೋರ್ಡ್ ನ್ಯಾವಿಗೇಷನ್: `Esc` ಕೀ ಮಾಡಲ್ ಅನ್ನು ಮುಚ್ಚುತ್ತದೆ ಮತ್ತು `Tab` ಕೀ ಮಾಡಲ್ ಒಳಗೆ ಮಾತ್ರ ಫೋಕಸ್ ಅನ್ನು ಸೈಕಲ್ ಮಾಡುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
ARIA ಅಟ್ರಿಬ್ಯೂಟ್‌ಗಳು: ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳಿಗೆ ಅದರ ಉದ್ದೇಶ ಮತ್ತು ರಚನೆಯನ್ನು ತಿಳಿಸಲು ನಿಮ್ಮ ಪೋರ್ಟಲ್ ಕಂಟೆಂಟ್‌ನಲ್ಲಿ `role="dialog"`, `aria-modal="true"`, `aria-labelledby`, ಮತ್ತು `aria-describedby` ನಂತಹ ARIA ರೋಲ್‌ಗಳು ಮತ್ತು ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಸರಿಯಾಗಿ ಬಳಸಿ.

4. ಸ್ಟೈಲಿಂಗ್ ಸವಾಲುಗಳು ಮತ್ತು ಪರಿಹಾರಗಳು

ಪೋರ್ಟಲ್‌ಗಳು DOM ಕ್ರಮಾನುಗತದ ಸಮಸ್ಯೆಗಳನ್ನು ಪರಿಹರಿಸುತ್ತವೆಯಾದರೂ, ಅವು ಎಲ್ಲಾ ಸ್ಟೈಲಿಂಗ್ ಸಂಕೀರ್ಣತೆಗಳನ್ನು ಮಾಂತ್ರಿಕವಾಗಿ ಪರಿಹರಿಸುವುದಿಲ್ಲ.

ಗ್ಲೋಬಲ್ vs. ಸ್ಕೋಪ್ಡ್ ಸ್ಟೈಲ್‌ಗಳು: ಪೋರ್ಟಲ್ ಕಂಟೆಂಟ್ ಜಾಗತಿಕವಾಗಿ ಪ್ರವೇಶಿಸಬಹುದಾದ DOM ನೋಡ್‌ಗೆ (`body` ಅಥವಾ `modal-root` ನಂತಹ) ರೆಂಡರ್ ಆಗುವುದರಿಂದ, ಯಾವುದೇ ಜಾಗತಿಕ CSS ನಿಯಮಗಳು ಅದರ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರಬಹುದು.
CSS-in-JS ಮತ್ತು CSS ಮಾಡ್ಯೂಲ್‌ಗಳು: ಈ ಪರಿಹಾರಗಳು ಸ್ಟೈಲ್‌ಗಳನ್ನು ಎನ್‌ಕ್ಯಾಪ್ಸುಲೇಟ್ ಮಾಡಲು ಮತ್ತು ಅನಪೇಕ್ಷಿತ ಸೋರಿಕೆಗಳನ್ನು ತಡೆಯಲು ಸಹಾಯ ಮಾಡುತ್ತವೆ, ಪೋರ್ಟಲ್ ಕಂಟೆಂಟ್ ಅನ್ನು ಸ್ಟೈಲಿಂಗ್ ಮಾಡುವಾಗ ಅವುಗಳನ್ನು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿಸುತ್ತವೆ. ಸ್ಟೈಲ್ಡ್ ಕಾಂಪೊನೆಂಟ್ಸ್, ಎಮೋಷನ್, ಅಥವಾ CSS ಮಾಡ್ಯೂಲ್‌ಗಳು ಅನನ್ಯ ಕ್ಲಾಸ್ ಹೆಸರುಗಳನ್ನು ರಚಿಸಬಹುದು, ನಿಮ್ಮ ಮಾಡಲ್‌ನ ಸ್ಟೈಲ್‌ಗಳು ಜಾಗತಿಕವಾಗಿ ರೆಂಡರ್ ಆಗಿದ್ದರೂ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಇತರ ಭಾಗಗಳೊಂದಿಗೆ ಸಂಘರ್ಷಿಸುವುದಿಲ್ಲ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.
ಥೀಮಿಂಗ್: ಕಾಂಟೆಕ್ಸ್ಟ್ API ಯೊಂದಿಗೆ ಹೇಳಿದಂತೆ, ನಿಮ್ಮ ಥೀಮಿಂಗ್ ಪರಿಹಾರ (ಅದು CSS ವೇರಿಯಬಲ್‌ಗಳು, CSS-in-JS ಥೀಮ್‌ಗಳು, ಅಥವಾ ಕಾಂಟೆಕ್ಸ್ಟ್-ಆಧಾರಿತ ಥೀಮಿಂಗ್ ಆಗಿರಲಿ) ಪೋರ್ಟಲ್ ಮಕ್ಕಳಿಗೆ ಸರಿಯಾಗಿ ಹರಡುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.

5. ಸರ್ವರ್-ಸೈಡ್ ರೆಂಡರಿಂಗ್ (SSR) ಪರಿಗಣನೆಗಳು

ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಸರ್ವರ್-ಸೈಡ್ ರೆಂಡರಿಂಗ್ (SSR) ಬಳಸುತ್ತಿದ್ದರೆ, ಪೋರ್ಟಲ್‌ಗಳು ಹೇಗೆ ವರ್ತಿಸುತ್ತವೆ ಎಂಬುದರ ಬಗ್ಗೆ ನೀವು ಗಮನ ಹರಿಸಬೇಕು.

`ReactDOM.createPortal` ಗೆ ಅದರ `container` ಆರ್ಗ್ಯುಮೆಂಟ್ ಆಗಿ DOM ಎಲಿಮೆಂಟ್ ಅಗತ್ಯವಿದೆ. SSR ಪರಿಸರದಲ್ಲಿ, ಆರಂಭಿಕ ರೆಂಡರ್ ಸರ್ವರ್‌ನಲ್ಲಿ ನಡೆಯುತ್ತದೆ, ಅಲ್ಲಿ ಯಾವುದೇ ಬ್ರೌಸರ್ DOM ಇರುವುದಿಲ್ಲ.
ಇದರರ್ಥ ಪೋರ್ಟಲ್‌ಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಸರ್ವರ್‌ನಲ್ಲಿ ರೆಂಡರ್ ಆಗುವುದಿಲ್ಲ. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕ್ಲೈಂಟ್-ಸೈಡ್‌ನಲ್ಲಿ ಕಾರ್ಯಗತಗೊಂಡ ನಂತರವೇ ಅವು "ಹೈಡ್ರೇಟ್" ಅಥವಾ ರೆಂಡರ್ ಆಗುತ್ತವೆ.
ಆರಂಭಿಕ ಸರ್ವರ್ ರೆಂಡರ್‌ನಲ್ಲಿ ಖಂಡಿತವಾಗಿಯೂ ಇರಬೇಕಾದ ಕಂಟೆಂಟ್‌ಗೆ (ಉದಾ., SEO ಅಥವಾ ಕ್ರಿಟಿಕಲ್ ಫಸ್ಟ್-ಪೇಂಟ್ ಪರ್ಫಾರ್ಮೆನ್ಸ್‌ಗಾಗಿ), ಪೋರ್ಟಲ್‌ಗಳು ಸೂಕ್ತವಲ್ಲ. ಆದಾಗ್ಯೂ, ಮಾಡಲ್‌ಗಳಂತಹ ಸಂವಾದಾತ್ಮಕ ಎಲಿಮೆಂಟ್‌ಗಳಿಗೆ, ಅವು ಸಾಮಾನ್ಯವಾಗಿ ಒಂದು ಕ್ರಿಯೆ ಪ್ರಚೋದಿಸುವವರೆಗೆ ಮರೆಮಾಡಲ್ಪಟ್ಟಿರುತ್ತವೆ, ಇದು ವಿರಳವಾಗಿ ಸಮಸ್ಯೆಯಾಗುತ್ತದೆ. ಸರ್ವರ್‌ನಲ್ಲಿ ಪೋರ್ಟಲ್ `container` ನ ಅನುಪಸ್ಥಿತಿಯನ್ನು ಅದರ ಅಸ್ತಿತ್ವವನ್ನು ಪರಿಶೀಲಿಸುವ ಮೂಲಕ (ಉದಾ., `document.getElementById('modal-root')`) ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಸುಲಲಿತವಾಗಿ ನಿಭಾಯಿಸುತ್ತವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.

6. ಪೋರ್ಟಲ್‌ಗಳನ್ನು ಬಳಸುವ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಪರೀಕ್ಷಿಸುವುದು

ಪೋರ್ಟಲ್‌ಗಳ ಮೂಲಕ ರೆಂಡರ್ ಮಾಡುವ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಪರೀಕ್ಷಿಸುವುದು ಸ್ವಲ್ಪ ವಿಭಿನ್ನವಾಗಿರಬಹುದು ಆದರೆ ರಿಯಾಕ್ಟ್ ಟೆಸ್ಟಿಂಗ್ ಲೈಬ್ರರಿಯಂತಹ ಜನಪ್ರಿಯ ಪರೀಕ್ಷಾ ಲೈಬ್ರರಿಗಳಿಂದ ಉತ್ತಮವಾಗಿ ಬೆಂಬಲಿತವಾಗಿದೆ.

ರಿಯಾಕ್ಟ್ ಟೆಸ್ಟಿಂಗ್ ಲೈಬ್ರರಿ: ಈ ಲೈಬ್ರರಿ ಡಿಫಾಲ್ಟ್ ಆಗಿ `document.body` ಅನ್ನು ಪ್ರಶ್ನಿಸುತ್ತದೆ, ಅಲ್ಲಿ ನಿಮ್ಮ ಪೋರ್ಟಲ್ ಕಂಟೆಂಟ್ ಹೆಚ್ಚಾಗಿ ಇರುತ್ತದೆ. ಆದ್ದರಿಂದ, ನಿಮ್ಮ ಮಾಡಲ್ ಅಥವಾ ಟೂಲ್‌ಟಿಪ್‌ನೊಳಗಿನ ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಪ್ರಶ್ನಿಸುವುದು ಸಾಮಾನ್ಯವಾಗಿ "ಹಾಗೆಯೇ ಕೆಲಸ ಮಾಡುತ್ತದೆ".
ಮಾಕಿಂಗ್: ಕೆಲವು ಸಂಕೀರ್ಣ ಸನ್ನಿವೇಶಗಳಲ್ಲಿ, ಅಥವಾ ನಿಮ್ಮ ಪೋರ್ಟಲ್ ಲಾಜಿಕ್ ನಿರ್ದಿಷ್ಟ DOM ರಚನೆಗಳಿಗೆ ಬಿಗಿಯಾಗಿ ಜೋಡಿಸಲ್ಪಟ್ಟಿದ್ದರೆ, ನಿಮ್ಮ ಪರೀಕ್ಷಾ ಪರಿಸರದಲ್ಲಿ ಟಾರ್ಗೆಟ್ `container` ಎಲಿಮೆಂಟ್ ಅನ್ನು ನೀವು ಮಾಕ್ ಮಾಡಬೇಕಾಗಬಹುದು ಅಥವಾ ಎಚ್ಚರಿಕೆಯಿಂದ ಹೊಂದಿಸಬೇಕಾಗಬಹುದು.

ರಿಯಾಕ್ಟ್ ಪೋರ್ಟಲ್‌ಗಳಿಗಾಗಿ ಸಾಮಾನ್ಯ ಅಪಾಯಗಳು ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

ನಿಮ್ಮ ರಿಯಾಕ್ಟ್ ಪೋರ್ಟಲ್‌ಗಳ ಬಳಕೆಯು ಪರಿಣಾಮಕಾರಿ, ನಿರ್ವಹಿಸಬಲ್ಲ ಮತ್ತು ಉತ್ತಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು, ಈ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಪರಿಗಣಿಸಿ ಮತ್ತು ಸಾಮಾನ್ಯ ತಪ್ಪುಗಳನ್ನು ತಪ್ಪಿಸಿ:

1. ಪೋರ್ಟಲ್‌ಗಳನ್ನು ಅತಿಯಾಗಿ ಬಳಸಬೇಡಿ

ಪೋರ್ಟಲ್‌ಗಳು ಶಕ್ತಿಶಾಲಿಯಾಗಿವೆ, ಆದರೆ ಅವುಗಳನ್ನು ವಿವೇಚನೆಯಿಂದ ಬಳಸಬೇಕು. ಒಂದು ಕಾಂಪೊನೆಂಟ್‌ನ ದೃಶ್ಯ ಔಟ್‌ಪುಟ್ ಅನ್ನು DOM ಕ್ರಮಾನುಗತವನ್ನು ಮುರಿಯದೆ ಸಾಧಿಸಬಹುದಾದರೆ (ಉದಾ., ನಾನ್-ಓವರ್‌ಫ್ಲೋಯಿಂಗ್ ಪೇರೆಂಟ್ ಒಳಗೆ ರಿಲೇಟಿವ್ ಅಥವಾ ಅಬ್ಸಲ್ಯೂಟ್ ಪೊಸಿಶನಿಂಗ್ ಬಳಸಿ), ಹಾಗೆ ಮಾಡಿ. ಪೋರ್ಟಲ್‌ಗಳ ಮೇಲಿನ ಅತಿಯಾದ ಅವಲಂಬನೆಯು ಎಚ್ಚರಿಕೆಯಿಂದ ನಿರ್ವಹಿಸದಿದ್ದರೆ ಕೆಲವೊಮ್ಮೆ DOM ರಚನೆಯನ್ನು ಡೀಬಗ್ ಮಾಡುವುದನ್ನು ಸಂಕೀರ್ಣಗೊಳಿಸಬಹುದು.

2. ಸರಿಯಾದ ಕ್ಲೀನಪ್ (ಅನ್‌ಮೌಂಟಿಂಗ್) ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ

ನಿಮ್ಮ ಪೋರ್ಟಲ್‌ಗಾಗಿ ನೀವು ಡೈನಾಮಿಕ್ ಆಗಿ DOM ನೋಡ್ ಅನ್ನು ರಚಿಸಿದರೆ (ನಮ್ಮ `Modal` ಉದಾಹರಣೆಯಲ್ಲಿ `el.current` ನಂತೆ), ಪೋರ್ಟಲ್ ಬಳಸುವ ಕಾಂಪೊನೆಂಟ್ ಅನ್‌ಮೌಂಟ್ ಆದಾಗ ಅದನ್ನು ಕ್ಲೀನ್ ಅಪ್ ಮಾಡುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. `useEffect` ಕ್ಲೀನಪ್ ಫಂಕ್ಷನ್ ಇದಕ್ಕೆ ಪರಿಪೂರ್ಣವಾಗಿದೆ, ಇದು ಮೆಮೊರಿ ಸೋರಿಕೆಗಳನ್ನು ತಡೆಯುತ್ತದೆ ಮತ್ತು ಅನಾಥ ಎಲಿಮೆಂಟ್‌ಗಳಿಂದ DOM ಅನ್ನು ಗೊಂದಲಗೊಳಿಸುವುದನ್ನು ತಪ್ಪಿಸುತ್ತದೆ.


useEffect(() => {
  // ... el.current ಅನ್ನು ಸೇರಿಸಿ
  return () => {
    // ... el.current ಅನ್ನು ತೆಗೆದುಹಾಕಿ;
  };
}, []);

ನೀವು ಯಾವಾಗಲೂ ಒಂದು ಸ್ಥಿರ, ಮೊದಲೇ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ DOM ನೋಡ್‌ಗೆ (`modal-root` ನಂತಹ) ರೆಂಡರ್ ಮಾಡುತ್ತಿದ್ದರೆ, *ನೋಡ್ ಸ್ವತಃ* ಕ್ಲೀನಪ್ ಅಗತ್ಯವಿಲ್ಲ, ಆದರೆ ಪೇರೆಂಟ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್‌ಮೌಂಟ್ ಆದಾಗ *ಪೋರ್ಟಲ್ ಕಂಟೆಂಟ್* ಸರಿಯಾಗಿ ಅನ್‌ಮೌಂಟ್ ಆಗುವುದನ್ನು ರಿಯಾಕ್ಟ್ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ನಿರ್ವಹಿಸುತ್ತದೆ.

3. ಕಾರ್ಯಕ್ಷಮತೆಯ ಪರಿಗಣನೆಗಳು

ಹೆಚ್ಚಿನ ಬಳಕೆಯ ಸಂದರ್ಭಗಳಲ್ಲಿ (ಮಾಡಲ್‌ಗಳು, ಟೂಲ್‌ಟಿಪ್‌ಗಳು), ಪೋರ್ಟಲ್‌ಗಳು ನಗಣ್ಯ ಕಾರ್ಯಕ್ಷಮತೆಯ ಪ್ರಭಾವವನ್ನು ಹೊಂದಿವೆ. ಆದಾಗ್ಯೂ, ನೀವು ಪೋರ್ಟಲ್ ಮೂಲಕ ಅತ್ಯಂತ ದೊಡ್ಡ ಅಥವಾ ಆಗಾಗ್ಗೆ ಅಪ್‌ಡೇಟ್ ಆಗುವ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ರೆಂಡರ್ ಮಾಡುತ್ತಿದ್ದರೆ, ಯಾವುದೇ ಇತರ ಸಂಕೀರ್ಣ ಕಾಂಪೊನೆಂಟ್‌ಗೆ ಮಾಡುವಂತೆ ಸಾಮಾನ್ಯ ರಿಯಾಕ್ಟ್ ಕಾರ್ಯಕ್ಷಮತೆಯ ಆಪ್ಟಿಮೈಸೇಶನ್‌ಗಳನ್ನು (`React.memo`, `useCallback`, `useMemo` ಇತ್ಯಾದಿ) ಪರಿಗಣಿಸಿ.

4. ಯಾವಾಗಲೂ ಪ್ರವೇಶಸಾಧ್ಯತೆಗೆ ಆದ್ಯತೆ ನೀಡಿ

ಹೈಲೈಟ್ ಮಾಡಿದಂತೆ, ಪ್ರವೇಶಸಾಧ್ಯತೆ ನಿರ್ಣಾಯಕವಾಗಿದೆ. ನಿಮ್ಮ ಪೋರ್ಟಲ್-ರೆಂಡರ್ ಆದ ಕಂಟೆಂಟ್ ARIA ಮಾರ್ಗಸೂಚಿಗಳನ್ನು ಅನುಸರಿಸುತ್ತದೆ ಮತ್ತು ಎಲ್ಲಾ ಬಳಕೆದಾರರಿಗೆ, ವಿಶೇಷವಾಗಿ ಕೀಬೋರ್ಡ್ ನ್ಯಾವಿಗೇಷನ್ ಅಥವಾ ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳನ್ನು ಅವಲಂಬಿಸಿರುವವರಿಗೆ ಸುಗಮ ಅನುಭವವನ್ನು ಒದಗಿಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.

ಮಾಡಲ್ ಫೋಕಸ್ ಟ್ರ್ಯಾಪಿಂಗ್: ತೆರೆದ ಮಾಡಲ್ ಒಳಗೆ ಕೀಬೋರ್ಡ್ ಫೋಕಸ್ ಅನ್ನು ಹಿಡಿದಿಡುವ ಲೈಬ್ರರಿಯನ್ನು ಬಳಸಿ ಅಥವಾ ಅಳವಡಿಸಿ.
ವಿವರಣಾತ್ಮಕ ARIA ಅಟ್ರಿಬ್ಯೂಟ್‌ಗಳು: ಮಾಡಲ್ ಕಂಟೆಂಟ್ ಅನ್ನು ಅದರ ಶೀರ್ಷಿಕೆ ಮತ್ತು ವಿವರಣೆಗೆ ಲಿಂಕ್ ಮಾಡಲು `aria-labelledby`, `aria-describedby` ಬಳಸಿ.
ಕೀಬೋರ್ಡ್ ಕ್ಲೋಸ್: `Esc` ಕೀಲಿಯೊಂದಿಗೆ ಮುಚ್ಚಲು ಅನುಮತಿಸಿ.
ಫೋಕಸ್ ಮರುಸ್ಥಾಪನೆ: ಮಾಡಲ್ ಮುಚ್ಚಿದಾಗ, ಅದನ್ನು ತೆರೆದ ಎಲಿಮೆಂಟ್‌ಗೆ ಫೋಕಸ್ ಅನ್ನು ಹಿಂತಿರುಗಿಸಿ.

5. ಪೋರ್ಟಲ್‌ಗಳೊಳಗೆ ಸೆಮ್ಯಾಂಟಿಕ್ HTML ಬಳಸಿ

ಪೋರ್ಟಲ್ ನಿಮಗೆ ಕಂಟೆಂಟ್ ಅನ್ನು ದೃಷ್ಟಿപരವಾಗಿ ಎಲ್ಲಿಯಾದರೂ ರೆಂಡರ್ ಮಾಡಲು ಅನುಮತಿಸಿದರೂ, ನಿಮ್ಮ ಪೋರ್ಟಲ್‌ನ ಮಕ್ಕಳೊಳಗೆ ಸೆಮ್ಯಾಂಟಿಕ್ HTML ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ಬಳಸಲು ಮರೆಯದಿರಿ. ಉದಾಹರಣೆಗೆ, ಒಂದು ಡೈಲಾಗ್ `

` ಎಲಿಮೆಂಟ್ ಅನ್ನು ಬಳಸಬೇಕು (ಬೆಂಬಲಿತವಾಗಿದ್ದರೆ ಮತ್ತು ಸ್ಟೈಲ್ ಮಾಡಿದ್ದರೆ), ಅಥವಾ `role="dialog"` ಮತ್ತು ಸೂಕ್ತ ARIA ಅಟ್ರಿಬ್ಯೂಟ್‌ಗಳೊಂದಿಗೆ `div` ಅನ್ನು ಬಳಸಬೇಕು. ಇದು ಪ್ರವೇಶಸಾಧ್ಯತೆ ಮತ್ತು SEO ಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ.

6. ನಿಮ್ಮ ಪೋರ್ಟಲ್ ಲಾಜಿಕ್ ಅನ್ನು ಸಂದರ್ಭೋಚಿತಗೊಳಿಸಿ

ಸಂಕೀರ್ಣ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗಾಗಿ, ನಿಮ್ಮ ಪೋರ್ಟಲ್ ಲಾಜಿಕ್ ಅನ್ನು ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಕಾಂಪೊನೆಂಟ್ ಅಥವಾ ಕಸ್ಟಮ್ ಹುಕ್‌ನಲ್ಲಿ ಎನ್‌ಕ್ಯಾಪ್ಸುಲೇಟ್ ಮಾಡುವುದನ್ನು ಪರಿಗಣಿಸಿ. ಉದಾಹರಣೆಗೆ, `useModal` ಹುಕ್ ಅಥವಾ ಜೆನೆರಿಕ್ `PortalWrapper` ಕಾಂಪೊನೆಂಟ್ `ReactDOM.createPortal` ಕರೆಯನ್ನು ಅಮೂರ್ತಗೊಳಿಸಬಹುದು ಮತ್ತು DOM ನೋಡ್ ರಚನೆ/ಕ್ಲೀನಪ್ ಅನ್ನು ನಿಭಾಯಿಸಬಹುದು, ಇದು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಕೋಡ್ ಅನ್ನು ಸ್ವಚ್ಛ ಮತ್ತು ಹೆಚ್ಚು ಮಾಡ್ಯುಲರ್ ಮಾಡುತ್ತದೆ.


// ಸರಳ ಪೋರ್ಟಲ್ ವ್ರ್ಯಾಪರ್‌ನ ಉದಾಹರಣೆ
import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom';

const createWrapperAndAppendToBody = (wrapperId) => {
  const wrapperElement = document.createElement('div');
  wrapperElement.setAttribute('id', wrapperId);
  document.body.appendChild(wrapperElement);
  return wrapperElement;
};

const PortalWrapper = ({ children, wrapperId = 'portal-wrapper' }) => {
  const [wrapperElement, setWrapperElement] = useState(null);

  useEffect(() => {
    let element = document.getElementById(wrapperId);
    let systemCreated = false;
    // wrapperId ನೊಂದಿಗೆ ಎಲಿಮೆಂಟ್ ಅಸ್ತಿತ್ವದಲ್ಲಿಲ್ಲದಿದ್ದರೆ, ಅದನ್ನು ರಚಿಸಿ ಮತ್ತು body ಗೆ ಸೇರಿಸಿ
    if (!element) {
      systemCreated = true;
      element = createWrapperAndAppendToBody(wrapperId);
    }
    setWrapperElement(element);

    return () => {
      // ಪ್ರೋಗ್ರಾಮ್ಯಾಟಿಕ್ ಆಗಿ ರಚಿಸಲಾದ ಎಲಿಮೆಂಟ್ ಅನ್ನು ಅಳಿಸಿ
      if (systemCreated && element.parentNode) {
        element.parentNode.removeChild(element);
      }
    };
  }, [wrapperId]);

  if (!wrapperElement) return null;

  return ReactDOM.createPortal(children, wrapperElement);
};

export default PortalWrapper;

ಈ `PortalWrapper` ನಿಮಗೆ ಯಾವುದೇ ಕಂಟೆಂಟ್ ಅನ್ನು ಸರಳವಾಗಿ ವ್ರ್ಯಾಪ್ ಮಾಡಲು ಅನುಮತಿಸುತ್ತದೆ, ಮತ್ತು ಅದು ನಿರ್ದಿಷ್ಟ ID ಯೊಂದಿಗೆ ಡೈನಾಮಿಕ್ ಆಗಿ ರಚಿಸಲಾದ (ಮತ್ತು ಕ್ಲೀನ್ ಅಪ್ ಮಾಡಲಾದ) DOM ನೋಡ್‌ಗೆ ರೆಂಡರ್ ಆಗುತ್ತದೆ, ಇದು ನಿಮ್ಮ ಆ್ಯಪ್‌ನಾದ್ಯಂತ ಬಳಕೆಯನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆ.

ತೀರ್ಮಾನ: ರಿಯಾಕ್ಟ್ ಪೋರ್ಟಲ್‌ಗಳೊಂದಿಗೆ ಜಾಗತಿಕ UI ಅಭಿವೃದ್ಧಿಯನ್ನು ಸಶಕ್ತಗೊಳಿಸುವುದು

ರಿಯಾಕ್ಟ್ ಪೋರ್ಟಲ್‌ಗಳು ಒಂದು ಸೊಗಸಾದ ಮತ್ತು ಅತ್ಯಗತ್ಯ ವೈಶಿಷ್ಟ್ಯವಾಗಿದ್ದು, ಇದು ಡೆವಲಪರ್‌ಗಳಿಗೆ DOM ಕ್ರಮಾನುಗತದ ಸಾಂಪ್ರದಾಯಿಕ ನಿರ್ಬಂಧಗಳಿಂದ ಹೊರಬರಲು ಅಧಿಕಾರ ನೀಡುತ್ತದೆ. ಮಾಡಲ್‌ಗಳು, ಟೂಲ್‌ಟಿಪ್‌ಗಳು, ಅಧಿಸೂಚನೆಗಳು ಮತ್ತು ಕಾಂಟೆಕ್ಸ್ಟ್ ಮೆನುಗಳಂತಹ ಸಂಕೀರ್ಣ, ಸಂವಾದಾತ್ಮಕ UI ಎಲಿಮೆಂಟ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಅವು ದೃಢವಾದ ಯಾಂತ್ರಿಕತೆಯನ್ನು ಒದಗಿಸುತ್ತವೆ, ಅವು ದೃಷ್ಟಿപരವಾಗಿ ಮತ್ತು ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಸರಿಯಾಗಿ ವರ್ತಿಸುತ್ತವೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತವೆ.

ಪೋರ್ಟಲ್‌ಗಳು ತಾರ್ಕಿಕ ರಿಯಾಕ್ಟ್ ಕಾಂಪೊನೆಂಟ್ ಟ್ರೀಯನ್ನು ಹೇಗೆ ನಿರ್ವಹಿಸುತ್ತವೆ, ಸುಗಮ ಈವೆಂಟ್ ಬಬ್ಲಿಂಗ್ ಮತ್ತು ಕಾಂಟೆಕ್ಸ್ಟ್ ಫ್ಲೋ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತವೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ, ಡೆವಲಪರ್‌ಗಳು ವೈವಿಧ್ಯಮಯ ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರನ್ನು ಪೂರೈಸುವ ನಿಜವಾದ ಅತ್ಯಾಧುನಿಕ ಮತ್ತು ಪ್ರವೇಶಸಾಧ್ಯ ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್‌ಗಳನ್ನು ರಚಿಸಬಹುದು. ನೀವು ಸರಳ ವೆಬ್‌ಸೈಟ್ ಅಥವಾ ಸಂಕೀರ್ಣ ಎಂಟರ್‌ಪ್ರೈಸ್ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ನಿರ್ಮಿಸುತ್ತಿರಲಿ, ರಿಯಾಕ್ಟ್ ಪೋರ್ಟಲ್‌ಗಳಲ್ಲಿ ಪರಿಣತಿ ಹೊಂದುವುದು ನಿಮ್ಮ ಹೊಂದಿಕೊಳ್ಳುವ, ಕಾರ್ಯಕ್ಷಮತೆಯ, ಮತ್ತು ಸಂತೋಷದಾಯಕ ಬಳಕೆದಾರ ಅನುಭವಗಳನ್ನು ರಚಿಸುವ ಸಾಮರ್ಥ್ಯವನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಹೆಚ್ಚಿಸುತ್ತದೆ. ಈ ಶಕ್ತಿಯುತ ಪ್ಯಾಟರ್ನ್ ಅನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳಿ, ಮತ್ತು ರಿಯಾಕ್ಟ್ ಅಭಿವೃದ್ಧಿಯ ಮುಂದಿನ ಹಂತವನ್ನು ಅನ್ಲಾಕ್ ಮಾಡಿ!