प्रतिक्रिया: इनलाइन सशर्त रूप से घटक को प्रस्ताव पारित करते हैं

Question

मैं यह जानना चाहूंगा कि क्या इफ-स्टेटमेंट का उपयोग करने की तुलना में किसी प्रस्ताव को सशर्त रूप से पारित करने का एक बेहतर तरीका है।

उदाहरण के लिए, अभी मेरे पास है:

var parent = React.createClass({
  propTypes: {
    editable: React.PropTypes.bool.isRequired,
    editableOpts: React.PropTypes.shape({...})
  },
  render: function() {
    if(this.props.editable) {
      return (
        <Child editable={this.props.editableOpts} />
      );
    } else {
      // In this case, Child will use the editableOpts from its own getDefaultProps()
      return (
        <Child />
      );
    }
  }
});

क्या इफ-स्टेटमेंट के बिना इसे लिखने का कोई तरीका है? मैं JSX में एक प्रकार की इनलाइन-इफ-स्टेटमेंट की तर्ज पर कुछ सोच रहा था:

var parent = React.createClass({
  propTypes: {
    editable: React.PropTypes.bool.isRequired,
    editableOpts: React.PropTypes.shape({...})
  },
  render: function() {
    return (
      <Child 
        {this.props.editable ? editable={this.props.editableOpts} : null} 
      />
    );
  }
});

रैप-अप करने के लिए : मैं एक प्रोप को परिभाषित करने का एक तरीका खोजने की कोशिश कर रहा हूं Child, लेकिन एक मान (या कुछ और करना) ऐसा है जो Childअभी भी उस प्रोप के मूल्य को Childखुद से खींचता है getDefaultProps()।

Comments

क्या आप कोड Childको भी शामिल कर सकते हैं ? इसके अलावा, आप के <Child editableOpts={this.props.editableOpts} />बजाय कहने का मतलब था <Child editable={this.props.editableOpts} />?

— जिम स्केरिट

@JimSkerritt मैंने प्रॉप्स को भ्रमित नहीं किया, हालांकि मुझे पता है कि यह इस तरह दिखता है। मैं उपयोग करने की कोशिश कर रहा हूं react-bootstrap-tableऔर यही वह प्रारूप है जिसका वे उपयोग करते हैं। मुझे यकीन नहीं है कि Childजो मैं पूछ रहा हूं उसके लिए कोड वास्तव में मायने रखता है, यही वजह है कि मैंने इसे शामिल नहीं किया। मैं वास्तव में सिर्फ वैकल्पिक रूप से पास होने का रास्ता खोज रहा हूं या इसके लिए एक प्रस्ताव पारित Childनहीं करता हूं कि अगर-कथनों में समान कोड की एक बड़ी मात्रा में होने की आवश्यकता नहीं है Parent।

— मैथ्यू हर्बस्ट

गोत्चा, बस चेकिंग :) मेरे पास आपके लिए शीघ्र ही एक उत्तर होगा

— जिम स्केरिट

Answer 1

आप अपने विचार के साथ करीब थे। यह पता चला है कि undefinedएक प्रोप के लिए गुजरना वही है जो इसे शामिल नहीं करता है, जो अभी भी डिफ़ॉल्ट प्रोप मूल्य को ट्रिगर करेगा। तो आप ऐसा कुछ कर सकते हैं:

var parent = React.createClass({
  propTypes: {
    editable: React.PropTypes.bool.isRequired,
    editableOpts: React.PropTypes.shape({...})
  },
  render: function() {
    return <Child 
      editable={this.props.editable ?
                  this.props.editableOpts : 
                  undefined}
    />;
  }
});

Comments

ओह कमाल! क्या आपको लगता है कि कहीं प्रलेखन में? मैं उस के लिए देख रहा था, लेकिन एक त्वरित खोज के दौरान कुछ भी नहीं मिल सका

— मैथ्यू हर्बस्ट

यकीन नहीं है कि यह प्रलेखन में है या नहीं, बस कुछ मैंने रिएक्ट का उपयोग करते समय सीखा है :)

— जिम स्केरिट

nullundefinedबीटीडब्ल्यू जैसी शक्ति से लैस नहीं है ।

— सीजन

उपयोगी ट्रिक! इच्छा है कि सशर्त प्रतिपादन तकनीकों का प्रभावी ढंग से उपयोग करने के लिए अच्छे संसाधन थे

— निकोडजिमेंज़

में falseमामला यह मेरे लिए जिस तरह से मैं चाहता था काम नहीं करता है - मैं अभी भी एक कुंजी-मान पेयर मिलती है: property: null। क्या यह अभी भी किसी एकल JSX तत्व के साथ करना संभव है?

— गाल गुनफेल्ड

Answer 2

इसमें एक प्रसार ऑपरेटर जोड़ें this.props.editable:

<Child {...(this.props.editable ? {editable: {this.props.editableOpts}} : {})} >

कार्य करना चाहिए।

Comments

क्या यह संपादन योग्य = {this.props.editable के समान परिणाम नहीं देता है? this.props.editableOpts: अपरिभाषित} या कोई अंतर है?

— गैरी

@ मूल्य: अंतर यह है कि कुछ घटकों को गलत तरीके से undefinedओवरराइड के रूप में माना जा सकता है (जैसे null, जो हमेशा ओवरराइड होता है) इसलिए डिफ़ॉल्ट मान को रखने के बजाय इसे मिथ्या मान पर सेट करने का एकमात्र तरीका स्पष्ट रूप से इसे पारित नहीं करना है, पास नहीं undefined।

— यन दोनदल

@ YannD emptynendal क्या होगा यदि मैं अपरिभाषित के बजाय एक खाली वस्तु का उपयोग करता हूं, जैसे <Child {... (this.props.editable? {Editable: {this.props.editableOpts}}: {)} क्या इससे कोई फर्क पड़ता है? इनमे से कौन बेहतर है?

— sktguha

@sktguha: हाँ वास्तव में, ऐसा लगता है कि एक टाइपो मुझे लगता है: हम अपरिभाषित नहीं फैला सकते हैं हाँ, यह {}अंत में होना चाहिए । मैं एक संस्करण का सुझाव दूंगा, धन्यवाद :)

— यैन डेंडेंडल

Answer 3

propsचर को परिभाषित करें :

let props = {};
if (this.props.editable){
  props.editable = this.props.editable;
}

और फिर JSX में इसका उपयोग करें:

<Child {...props} />

यहाँ आपके कोड में एक समाधान है:

var parent = React.createClass({
  propTypes: {
    editable: React.PropTypes.bool.isRequired,
    editableOpts: React.PropTypes.shape({...})
  },
  render: function() {
    let props = {};
    if (this.props.editable){
      props.editable = this.props.editable;
    }
    return (
      <Child {...props} />
    );
  }
});

स्रोत, प्रतिक्रिया दस्तावेज: https://facebook.github.io/react/docs/jsx-in-depth.html#spread-attributes

Comments

मुझे यह समाधान पसंद है। मैं childPropsहालांकि भ्रम से बचने के लिए उपयोग करूँगा

— डैनियल रीना

Answer 4

दरअसल, अगर आपका प्रॉप बूलियन है, तो इसे शर्त को लागू करने की जरूरत नहीं है, लेकिन अगर आप इनलाइन कंडीशन में प्रोप जोड़ना चाहते हैं, तो आपको नीचे लिखना चाहिए:

const { editable, editableOpts } = this.props;
return (
  <Child {...(editable && { editable: editableOpts } )} />
);

आशा है कि यह आपको भ्रमित नहीं करेगा। {...: साधन यह अस्तित्व में रंगमंच की सामग्री गुजर तरह फैल ऑपरेटर है {...props}और editable &&इसका मतलब है कि अगर editableहै वस्तु बनाने के लिए और साथ होगा हम इसे की तरह एक नई वस्तु कर देगा: कि इसका मतलब है , लेकिन अगर सच है।true{ editable: editableOpts }{...{...{ editable: editableOpts }}editable={editableOpts}this.porps.editable

Answer 5

var parent = React.createClass({
  propTypes: {
    editable: React.PropTypes.bool.isRequired,
    editableOpts: React.PropTypes.shape({...})
  },
  render: function() {
    return (
      <Child 
        {...(this.props.editable && {editable=this.props.editableOpts})} 
      />
    );
  }
});

यदि वे परिभाषित हैं तो यह प्रॉपर पास करता है। और गद्य पास नहीं हैं। दूसरे उत्तर में प्रॉप्स को अभी भी पास किया गया है, लेकिन वैल्यू undefinedजिसका मतलब है कि प्रॉप्स को पास किया जा रहा है।

Comments

पासिंग undefinedएक प्रोप करने के लिए सभी पर इसे पारित नहीं के बराबर है।

— मैथ्यू हर्बस्ट

हाँ मैं समझता हूँ। मैं बस यह स्पष्ट होना चाहता था! धन्यवाद!

— sanair96

Answer 6

इसके अलावा आप इस छोटे हाथ की कोशिश कर सकते हैं

 <Child {...(this.props.editable  && { editable: this.props.editableOpts })} />