मैं प्रतिक्रिया के लिए नया हूँ और यह एक बुनियादी ज्ञान हो सकता है, लेकिन मुझे इंटरनेट पर कोई भी संबंधित जानकारी नहीं मिल रही है।

मेरे पास निम्न कोड है जो एक मोडल विंडो को पॉप अप करता है जब आप कुछ बटन पर क्लिक करते हैं (बटन पर क्लिक करने से history.push(url) एक्शन होता है, जो मोडल विंडो को पॉप अप करता है):



const ProjectBoard = () => {
  const match = useRouteMatch();
  const history = useHistory();
  const [filters, mergeFilters] = useMergeState(defaultFilters);

  const [IssueCreateModalOpen, setIssueCreateModalOpen] = useState(false);

  const [{ data, error, setLocalData }, fetchProject] = useApi.get('/project');

  if (!data) return <PageLoader />;
  if (error) return <PageError />;

  const { project } = data;

  const updateLocalProjectIssues = (issueId, updatedFields) => {
    setLocalData(currentData => ({
      project: {
        ...currentData.project,
        issues: updateArrayItemById(currentData.project.issues, issueId, updatedFields),
      },
    }));
  };
  
  return (
      <Fragment>
      <Header/>
      <Lists
        project={project}
        filters={filters}
        updateLocalProjectIssues={updateLocalProjectIssues}
      />

      <br/>

      <Route
        path={`${match.path}/issues/:issueId`}
        render={routeProps => (
          <Modal
            isOpen  // confusion 1: this variable is not defined anywhere!! 
            testid="modal:issue-details"
            width={1040}
            withCloseIcon={false}
            onClose={()=>history.push(match.url)}
            renderContent={modal => (
              <IssueDetails
                issueId={routeProps.match.params.issueId}
                trigger={routeProps.location.state.trigger}
                projectUsers={project.users}
                fetchProject={fetchProject}
                updateLocalProjectIssues={updateLocalProjectIssues}
                modalClose={modal.close}
              />
            )}
          />
        )}
      />
    </Fragment>

  );

}


export default ProjectBoard;


नीचे वह जगह है जहां Modal घटक परिभाषित किया गया है:

import React, { Fragment, useState, useRef, useEffect, useCallback } from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';

import useOnOutsideClick from '../../hooks/onOutsideClick';
import useOnEscapeKeyDown from '../../hooks/onEscapeKeyDown';


const propTypes = {
  className: PropTypes.string,
  testid: PropTypes.string,
  variant: PropTypes.oneOf(['center', 'aside']),
  width: PropTypes.number,
  withCloseIcon: PropTypes.bool,
  isOpen: PropTypes.bool,
  onClose: PropTypes.func,
  renderLink: PropTypes.func,
  renderContent: PropTypes.func.isRequired,
};

const defaultProps = {
  className: undefined,
  testid: 'modal',
  variant: 'center',
  width: 600,
  withCloseIcon: true,
  isOpen: undefined,
  onClose: () => {},
  renderLink: () => {},
};

const Modal = ({
  className,
  testid,
  variant,
  width,
  withCloseIcon,
  isOpen: propsIsOpen,  // confusion 3: what does it mean, x:y ? 
  onClose: tellParentToClose,
  renderLink,
  renderContent,
}) => {
  console.log('---- propsIsOpen: ', propsIsOpen, typeof(propsIsOpen))
  const [stateIsOpen, setStateOpen] = useState(false);
  const isControlled = typeof propsIsOpen === 'boolean';
  const isOpen = isControlled ? propsIsOpen : stateIsOpen; // confusion 2: if isOpen is defined here, why even bother to pass a prop named as isOpen ?? 
  
  const $modalRef = useRef();
  const $clickableOverlayRef = useRef();

  const closeModal = useCallback(() => {
    if (!isControlled) {
      setStateOpen(false);
    } else {
      tellParentToClose();
    }
  }, [isControlled, tellParentToClose]);

  useOnOutsideClick($modalRef, isOpen, closeModal, $clickableOverlayRef);
  useOnEscapeKeyDown(isOpen, closeModal);

  useEffect(() => {

    console.log('Modal renderContent: ', renderContent)

    document.body.style.overflow = 'hidden';

    return () => {
      document.body.style.overflow = 'visible';
    };
  }, [isOpen]);

  return (
    <Fragment>
      {!isControlled && renderLink({ open: () => setStateOpen(true) })}

      {isOpen &&
        ReactDOM.createPortal(
          <ScrollOverlay>
            <ClickableOverlay variant={variant} ref={$clickableOverlayRef}>
                ... some code ...
            </ClickableOverlay>
          </ScrollOverlay>,
          $root,
        )}
    </Fragment>
  );
};

const $root = document.getElementById('root');

Modal.propTypes = propTypes;
Modal.defaultProps = defaultProps;

export default Modal;

उपरोक्त कोड खंड निश्चित रूप से काम करते हैं। मैं बस अपना सिर इधर-उधर नहीं कर सकता:

भ्रम १: वेरिएबल isOpen को Modal घटक के प्रोप के रूप में पारित होने से पहले कहीं भी परिभाषित नहीं किया गया है

भ्रम २: isOpen को Modal घटक के भीतर एक "ताजा नया चर" के रूप में परिभाषित किया गया है, फिर भी isOpen नामक एक प्रोप को Modal घटक में पास करने की जहमत क्यों उठाई जाए पहले स्थान पर??

भ्रम 3: किसी घटक के इनपुट में x:y का क्या अर्थ है? यानी isOpen: propsIsOpen,

1
Kid_Learning_C 7 जुलाई 2021, 13:39

3 जवाब

सबसे बढ़िया उत्तर

भ्रम 1:

<Modal
 isOpen  // confusion 1: this variable is not defined anywhere!! 
 testid="modal:issue-details"

कुछ भी जो परिभाषित नहीं है या स्पष्ट रूप से असाइन किया गया मान बूलियन है और यह डिफ़ॉल्ट मान को "सत्य" के रूप में लेता है। तो यहां आप मॉडल घटक के लिए isOpen नाम का एक प्रोप पास कर रहे हैं। आप अन्यथा isOpen={false} के रूप में निर्दिष्ट करेंगे।

संदर्भ:- https://reactjs.org/docs /jsx-in-depth.html#props-default-to-true

भ्रम 3:

isOpen: propsIsOpen,  // confusion 3: what does it mean, x:y ? 

आपको ES6 destructuring पर शोध करने की आवश्यकता है। इसे आसान तरीके से समझने के लिए, नीचे दिए गए नामित निर्यातों के माध्यम से एक उदाहरण देखें

मान लीजिए कि आपके पास "someModule" से "doThis" नामक एक फ़ंक्शन है

आप इसे आयात कर सकते हैं

import { doThis } from "someModule";
         or
import { doThis as doIt } from "someModule"

इसी तरह, डी-स्ट्रक्चरिंग आपको अपनी पसंद के नाम पर एक पूर्वनिर्धारित चर का नाम देने की अनुमति देता है।

यही "isOpen: propsIsOpen" के बारे में है। आप पठनीयता या स्वच्छ कोड के लिए isOpen को propIsOpen के रूप में संदर्भित करना चाहते हैं या जो भी डेवलपर का कारण / वरीयता है।

भ्रम 2:

confusion 2: if isOpen is defined here, why even bother to pass a prop named as isOpen ?? 

खैर, उन्होंने कुछ सशर्त जाँच करने के लिए आने वाले प्रोप (isOpen) मान प्राप्त करने के लिए मोडल घटक में एक और चर का उपयोग करने का निर्णय लिया है। दुर्भाग्य से, उन्होंने एक ही नाम isOpen का उपयोग किया है, इसलिए इसने भ्रम पैदा किया है।

कॉन्स्ट isModalOpen = isControlled? propsIsOpen : StateIsOpen;

इसे isModalOpen जैसी किसी और चीज़ का नाम देने से आपको भ्रम संख्या 2 से बचने में मदद मिल सकती है।

1
deechris27 7 जुलाई 2021, 18:44

जिस स्थान पर आपने "confusion1" को फ़्लैग किया है, isOpen एक वैरिएबल नहीं है, यह एक प्रॉपर्टी का नाम है। मूल्य के बिना केवल एक संपत्ति नाम का उपयोग करना (सिर्फ isOpen, isOpen="..." या isOpen={...} नहीं) का अर्थ है कि यह एक बूलियन संपत्ति है (जैसे checked HTML चेकबॉक्स पर)। यदि आप इसे निर्दिष्ट करते हैं, तो संपत्ति का मूल्य true है। यदि आप इसे निर्दिष्ट नहीं करते हैं, तो संपत्ति का मूल्य undefined है (हमेशा अनिर्दिष्ट गुणों के साथ)।

आपका भ्रम २ और ३ एक ही भ्रम है: विनाशकारी होने पर, x: y का अर्थ है "x नाम की संपत्ति लें, लेकिन इसे इसके बजाय y नामक एक चर/स्थिरांक में रखें। (मूल रूप से, इसका नाम बदलना) ।) तो Modal में विनाशकारी isOpen संपत्ति को propsIsOpen नामक पैरामीटर में कॉपी कर रहा है। इस तरह, घटक में कोड एक isOpen चर घोषित कर सकता है थोड़ा समायोजित मूल्य।

बूलियन संपत्ति का एक उदाहरण यहां दिया गया है:

function Example({theProp}) {
    return <div>
        <code>typeof theProp = {typeof theProp},
        theProp = {JSON.stringify(theProp)}</code>
    </div>;
}

ReactDOM.render(
    <div>
        <div><code>&lt;Example theProp/&gt;</code> :</div>
        <Example theProp />
        <div><code>&lt;Example /&gt;</code> :</div>
        <Example />
    </div>,
    document.getElementById("root")
);
<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

यहां विनाशकारी नाम बदलने का एक उदाहरण दिया गया है:

const obj = {
    b: 42,
};
const {b: a} = obj;
console.log(a);
2
T.J. Crowder 7 जुलाई 2021, 10:49

// भ्रम 3 - isOpen: propsIsOpen का अर्थ है const propsIsOpen = isOpen

// भ्रम २ - इस तरह से स्थिरांक को फिर से घोषित करना वास्तव में एक बुरा अभ्यास है, इसलिए मूल रूप से यह प्रॉपर से isOpen के आधार पर एक नया चर बनाता है, अगर यह वहां मौजूद है, या stateIsOpen अन्यथा

// भ्रम 1 - यह घटक को माता-पिता से वैकल्पिक रूप से नियंत्रित करने के लिए किया जाता है - यदि आप isOpen पास करते हैं - यदि आपका मोडल ओपन है, तो आपका मूल घटक नियंत्रित कर सकता है, अन्यथा यह मोडल के भीतर से ही नियंत्रित होता है

1
Nikita Mazur 7 जुलाई 2021, 10:48