Reactjs में {... this.props} का अर्थ क्या है

Question

का अर्थ क्या है

{...this.props}

मैं इसे उसी तरह इस्तेमाल करने की कोशिश कर रहा हूं

 <div {...this.props}> Content Here </div>

Answer 1

इसे स्प्रेड एट्रिब्यूट्स कहा जाता है और इसका उद्देश्य प्रॉप्स के पासिंग को आसान बनाना है।

हमें कल्पना करें कि आपके पास एक घटक है जो एन संख्या के गुणों को स्वीकार करता है। यदि संख्या बढ़ती है, तो इनको पास करना थकाऊ और अनिष्टकारी हो सकता है।

<Component x={} y={} z={} />

इस प्रकार इसके बजाय आप ऐसा करते हैं, उन्हें एक वस्तु में लपेटते हैं और प्रसार संकेतन का उपयोग करते हैं

var props = { x: 1, y: 1, z:1 };
<Component {...props} />

जो इसे आपके कंपोनेंट पर प्रॉप्स में अनपैक करेगा, यानी, आप {... props}अपने render()फंक्शन के अंदर "कभी नहीं" का इस्तेमाल करते हैं, केवल तभी जब आप प्रॉप्स को किसी दूसरे कंपोनेंट में पास करते हैं। अपने अनपैक्ड प्रॉप्स को सामान्य की तरह इस्तेमाल करें this.props.x।

Comments

बस जोड़ने के लिए, यह एक प्रतिस्थापन के रूप में सोचने में मदद कर सकता है this.transferPropsToजिसे रिएक्ट 0.12.x में पदावनत किया गया था और 0.13.x में हटा दिया जाएगा। निश्चित रूप से यह बहुत अधिक उन्नत उपयोग हालांकि बस के अनुवाद प्रतिक्रिया 0.11.x के लिए अनुमति देता है this.transferPropsTo(<Foo />)के लिए <Foo {...this.props} />कि परिवर्तन करने लोगों के लिए सबसे उपयोगी है।

— माइक ड्राइवर

अच्छा awnser, लेकिन 'आप "कभी भी अपने रेंडर () फंक्शन के अंदर {... प्रॉप्स} का उपयोग नहीं करते हैं, केवल तभी जब आप प्रॉप्स को दूसरे कंपोनेंट में पास करते हैं।' वाक्यांश का एक बहुत ही भ्रमित करने वाला शब्द है। फिर से लिखने की सिफारिश इस प्रकार है "जब आप अपने रेंडर के अंदर {... प्रॉप्स} का इस्तेमाल करते हैं (जब आप प्रॉप्स को दूसरे कंपोनेंट में पास करते हैं।" विस्तृत जानकारी के लिए।

— 21

Answer 2

यह ES6 Spread_operatorऔर है Destructuring_assignment।

<div {...this.props}>
  Content Here
</div>

के बराबर है Class Component

const person = {
    name: "xgqfrms",
    age: 23,
    country: "China"
};

class TestDemo extends React.Component {
    render() {
        const {name, age, country} = {...this.props};
        // const {name, age, country} = this.props;
        return (
          <div>
              <h3> Person Information: </h3>
              <ul>
                <li>name={name}</li>
                <li>age={age}</li>
                <li>country={country}</li>
              </ul>
          </div>
        );
    }
}

ReactDOM.render(
    <TestDemo {...person}/>
    , mountNode
);

---

या Function component

const props = {
    name: "xgqfrms",
    age: 23,
    country: "China"
};

const Test = (props) => {
  return(
    <div
        name={props.name}
        age={props.age}
        country={props.country}>
        Content Here
        <ul>
          <li>name={props.name}</li>
          <li>age={props.age}</li>
          <li>country={props.country}</li>
        </ul>
    </div>
  );
};

ReactDOM.render(
    <div>
        <Test {...props}/>
        <hr/>
        <Test 
            name={props.name}
            age={props.age}
            country={props.country}
        />
    </div>
    , mountNode
);

refs

• https://babeljs.io/docs/plugins/transform-object-rest-spread/

• https://facebook.github.io/react/docs/components-and-props.html

Answer 3

यह इस पर संकलित करेगा:

React.createElement('div', this.props, 'Content Here');

जैसा कि आप ऊपर देख सकते हैं, यह वह सब है जो इसे सहारा देता है div।

Answer 4

यह ES-6 फीचर है। इसका मतलब है कि आप में सहारा के सभी गुणों को निकालने div.{... }

ऑपरेटर का उपयोग किसी वस्तु के गुणों को निकालने के लिए किया जाता है।

Answer 5

आप अपने बच्चे के घटक में प्रॉप्स का उपयोग करेंगे

उदाहरण के लिए

यदि आपका अब घटक सहारा है

{
   booking: 4,
   isDisable: false
}

आप इस प्रॉप्स का उपयोग अपने बच्चे के कंपोनेट में कर सकते हैं

 <div {...this.props}> ... </div>

आप बच्चे के घटक में, आप अपने सभी माता-पिता को प्राप्त करेंगे।

Comments

अच्छा जवाब है लेकिन बेहतर होगा यदि आप इस बारे में स्पष्टीकरण शामिल करें कि प्रॉप्स किस लिए हैं।

— माइक