इसका क्या मतलब है ... बाकी रिएक्ट JSX में

Question 1

इस React Router Dom v4 उदाहरण को देखते हुए https://reacttraining.com/react-router/web/example/auth-workflow मैं देखता हूं कि PrivateRoute घटक इस तरह एक बाकी प्रोप को नष्ट कर देता है

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    fakeAuth.isAuthenticated ? (
      <Component {...props}/>
    ) : (
      <Redirect to={{
        pathname: '/login',
        state: { from: props.location }
      }}/>
    )
  )}/>
)

मैं निश्चित होना चाहता हूं कि { component: Component, ...rest }इसका मतलब है:

से props, घटक प्रोप और फिर आप के लिए दिया सभी अन्य रंगमंच की सामग्री, और नाम बदलने प्राप्त propsकरने के लिए restताकि आप रंगमंच की सामग्री का को पास किए जाने के साथ मुद्दों के नामकरण से बच सकते हैं renderसमारोह

क्या मैं सही हू?

Question 2

क्षमा करें, मुझे मेरे पहले उत्तर का एहसास हुआ (जबकि उम्मीद है कि अभी भी उपयोगी / अतिरिक्त संदर्भ प्रदान कर रहा है) आपके प्रश्न का उत्तर नहीं देता है। मुझे दोबारा प्रयास करने दें।

तुम पूछो:

मैं निश्चित होना चाहता हूं कि { component: Component, ...rest }इसका मतलब है:

से props, Componentप्रोप और फिर propsआप को दिए गए अन्य सभी को प्राप्त करें , और नाम बदलने के propsलिए restआप propsरूट renderफ़ंक्शन को दिए गए नामकरण के मुद्दों से बच सकते हैं

आपकी व्याख्या बिल्कुल सही नहीं है। हालांकि आपके विचारों के आधार पर, ऐसा लगता है कि आप कम से कम इस तथ्य से अवगत हैं कि यहां क्या हो रहा है, किसी प्रकार की वस्तु विनाशकारी मात्रा (दूसरा उत्तर और अधिक स्पष्टीकरण के लिए टिप्पणियां देखें)।

एक सटीक विवरण देने के लिए, आइए { component: Component, ...rest }अभिव्यक्ति को दो अलग-अलग कार्यों में विभाजित करते हैं:

ऑपरेशन 1:component पर परिभाषित संपत्ति का पता लगाएं props( नोट : लोअरकेस सी omponent) और इसे राज्य में एक नए स्थान पर असाइन करें जिसे हम कहते हैं Component( नोट : पूंजी सी omponent)।
ऑपरेशन 2: फिर, ऑब्जेक्ट पर परिभाषित सभी शेष गुणों को लें propsऔर उन्हें एक तर्क के अंदर इकट्ठा करें rest।

महत्वपूर्ण बात यह है कि आप नाम नहीं बदल propsरहे हैं rest। (और न ही यह " propsरूट renderफ़ंक्शन के लिए पारित नामकरण से बचने के लिए" का प्रयास करने के साथ करना है )।

rest === props;
// => false

आप बस बाकी चीजों को खींच रहे हैं (इसलिए तर्क का नाम क्यों दिया गया है) आपकी propsवस्तु पर परिभाषित गुणों को एक नए तर्क में कहा जाता है rest।

उदाहरण उपयोग

यहाँ एक उदाहरण है। मान लेते हैं कि हमारे पास एक वस्तु है `myObj` को निम्नानुसार परिभाषित किया गया है:

const myObj = {
  name: 'John Doe',
  age: 35,
  sex: 'M',
  dob: new Date(1990, 1, 1)
};

इस उदाहरण के लिए, यह केवल propsउसी संरचना के होने के बारे में सोचने में मदद कर सकता है ( जैसे , गुण और मूल्य) जैसा कि दिखाया गया है myObj। अब, निम्नलिखित असाइनमेंट लिखते हैं।

const { name: Username, ...rest } = myObj

दो चर (या, मुझे लगता है, स्थिरांक) की घोषणा और असाइनमेंट दोनों के लिए राशि से ऊपर का बयान । इस कथन के रूप में सोचा जा सकता है:

nameजिस संपत्ति को परिभाषित किया गया है, उसे ले लीजिए myObjऔर उसके मूल्य को हम एक नए वेरिएबल पर कॉल करते हैं Username। फिर, ले जो कुछ अन्य संपत्तियों पर परिभाषित किया गया myObj( यानी , age, sexऔर dob) और उन्हें चर हम नाम करने के लिए आवंटित एक नई वस्तु में इकट्ठा rest।

लॉगिंग Usernameऔर restकरने के लिए consoleयह पुष्टि करेगा। हमारे पास निम्नलिखित हैं:

console.log(Username);
// => John Doe

console.log(rest);
// => { age: 35, sex: 'M', dob: Mon Jan 01 1990 00:00:00 GMT-0800 (PST) }

पक्षीय लेख

आप आश्चर्यचकित हो सकते हैं:

componentकेवल Componentएक बड़े अक्षर "C" के साथ नाम बदलने के लिए संपत्ति को खींचने की परेशानी के माध्यम से क्यों जाएं ?

हाँ, यह बहुत तुच्छ लगता है। और, जब यह एक मानक प्रतिक्रिया अभ्यास है, तो फेसबुक के सभी दस्तावेजों पर इसके ढांचे के रूप में लिखे जाने का एक कारण है। जेएसएक्स के साथ प्रदान किए गए कस्टम घटकों को बड़े पैमाने पर कैपिटलाइज़ करना एक आवश्यकता से कम प्रति अभ्यास है। प्रतिक्रिया, या अधिक ठीक से, JSX केस-संवेदी है । बिना पूंजीगत पहले अक्षर के डाले गए कस्टम घटक डीम को प्रदान नहीं किए जाते हैं। यह सिर्फ रिएक्ट ने कस्टम घटकों की पहचान करने के लिए खुद को कैसे परिभाषित किया है। इस प्रकार, उदाहरण के अतिरिक्त का नाम नहीं बदला था componentसंपत्ति है कि के बंद खींचा गया था propsकरने के लिए Component, <component {...props} />अभिव्यक्ति ठीक से प्रस्तुत करने के लिए विफल हो जाएगा।

Question 3

यह आपको अपने सभी propsसंक्षिप्त अभिव्यक्ति में "फैलाने" की अनुमति देता है । उदाहरण के लिए, मान लें कि propsआपका PrivateRouteघटक जैसा दिखता है, वैसा ही प्राप्त होता है

// `props` Object:
{
  thing1: 'Something',
  thing2: 'Something else'
}

यदि आप इन वस्तुओं ( यानी , thing1और thing2) को नेस्टेड <Component />टैग को सौंपना चाहते हैं और आप ऑब्जेक्ट स्प्रेड सिंटैक्स से परिचित नहीं थे , तो आप लिख सकते हैं:

<Component
  thing1={ props.thing1 }
  thing2={ props.thing2 } />

हालांकि, { ...props }वाक्य रचना आप करने की अनुमति देकर इस तरह के शब्दाडंबर अनावश्यक फैल अपने propsउसी तरह से एक में वस्तु हो सकता है फैल मूल्यों (की एक सरणी जैसे , [...vals])। दूसरे शब्दों में, नीचे और ऊपर JSX अभिव्यक्ति बिल्कुल समान हैं।

<Component { ...props } />

Question 4

इसे सरल रखें: जावास्क्रिप्ट में, यदि "कुंजी: मान" जोड़े समान हैं, तो obj={account:account}जैसा है वैसा ही है obj={account}। तो जब माता-पिता से बच्चे के घटक के लिए सहारा गुजरता है :

const Input = ({name,label,error, ...rest}) => {
  return (
    <div className="form-group">
      <label htmlFor={name}>{label}</label>
      <input
        {...rest}
        autoFocus
        name={name}
        id={name}
        className="form-control"
        aria-describedby="emailHelp"
      />
    </div>
  );
};
export default Input;

आप के रूप में सहारा के बाकी गुजर जाएगा :

label={label} placeholder={placeholder} type={type}