ReactJS में गतिशील विशेषता

Question

मैं एक बटन तत्व पर निष्क्रिय विशेषता को गतिशील रूप से शामिल / छोड़ना चाहता हूं। मैंने गतिशील विशेषता मूल्यों के बहुत सारे उदाहरण देखे हैं, लेकिन स्वयं विशेषताओं के नहीं। मेरे पास निम्न रेंडर फंक्शन हैं:

render: function() {
    var maybeDisabled = AppStore.cartIsEmpty() ? "disabled" : "";
    return <button {maybeDisabled}>Clear cart</button>
}

यह "{" वर्ण के कारण पार्स त्रुटि को फेंकता है। मैं AppStore.cartIsEmpty (?) के परिणाम (बूलियन) के आधार पर अक्षम विशेषता को कैसे शामिल / छोड़ सकता हूं?

Answer 1

वैकल्पिक विशेषताओं को जोड़ने का सबसे साफ तरीका (सहित disabledऔर जिन्हें आप उपयोग करना चाहते हैं) वर्तमान में JSX प्रसार विशेषताओं का उपयोग करना है :

var Hello = React.createClass({
    render: function() {
        var opts = {};
        if (this.props.disabled) {
            opts['disabled'] = 'disabled';
        }
        return <button {...opts}>Hello {this.props.name}</button>;
    }
});

React.render((<div><Hello name="Disabled" disabled='true' />
    <Hello name="Enabled"  />
</div>)
, document.getElementById('container'));

फैली हुई विशेषताओं का उपयोग करके, आप जावास्क्रिप्ट ऑब्जेक्ट ऑब्जेक्ट का उपयोग करके जो भी विशेषताएँ चाहें, उन्हें गतिशील रूप से जोड़ (या ओवरराइड) कर सकते हैं। उपरोक्त मेरे उदाहरण में, कोड एक disabledकुंजी बनाता है ( disabledइस मामले में एक मूल्य के साथ ) जब disabledसंपत्ति Helloघटक उदाहरण के लिए पारित हो जाती है ।

यदि आप केवल उपयोग करना चाहते हैं disabled, तो यह उत्तर अच्छी तरह से काम करता है।

Comments

एक बार जगह में, सीएसएस की तरह: a[disabled] { pointer-events: none; }

— टिम्बो

Answer 2

आप disabledविशेषता को बूलियन पास कर सकते हैं ।

render: function() {
    return <button disabled={AppStore.cartIsEmpty()}>Clear cart</button>
}

Comments

नहीं तुम नहीं कर सकते। अक्षम विशेषता की उपस्थिति बटन को पूरी तरह से निष्क्रिय कर देती है। देखें http://jsfiddle.net/ttjhyvmt/

— टिम्मी

प्रतिक्रियात्मक रूप से disabledआपके द्वारा jsfiddle.net/kb3gN/10379

— एलेक्जेंडर Kirszenberg

मुझे यकीन नहीं है कि मैं कैसे चूक गया, धन्यवाद! अपने विशिष्ट मामले के लिए यह काम करते हुए, मैंने एक और उत्तर स्वीकार किया है, जो छपता है / जिसमें विशेषताएँ शामिल हैं

— टिम्मी

IE11 के साथ मुद्दे थे, हालांकि, हम नवीनतम प्रतिक्रिया का उपयोग नहीं कर रहे थे। JSX स्प्रेड विशेषता उत्तर ने काम किया।

— सबक्यूसर

Answer 3

मैं रिएक्ट 16 का उपयोग कर रहा हूं और यह मेरे लिए काम करता है (जहां boolआपका परीक्षण है):

<fieldset {...(bool ? {disabled:true} : {})}>

मूल रूप से, परीक्षण के आधार पर ( bool) आप किसी ऑब्जेक्ट को विशेषता के साथ लौटाते हैं या आप किसी खाली ऑब्जेक्ट को वापस करते हैं।

इसके अलावा, यदि आपको कई विशेषताओं को जोड़ने या छोड़ने की आवश्यकता है, तो आप ऐसा कर सकते हैं:

<fieldset {...(bool ? {disabled:true} : {})} {...(bool ? {something:'123'} : {})}>

अधिक विस्तृत विशेषता के लिए, मेरा सुझाव है कि आप JSX के बाहर की विशेषताओं के साथ (या उसके बिना) वस्तु को प्रीफ़ैब करें।

Comments

उस सरल अभी तक बहुत उपयोगी उत्तर के लिए धन्यवाद!

— tommygun

Answer 4

गतिशील विशेषताओं को करने का अधिक क्लीनर तरीका जो किसी भी विशेषता के लिए काम करता है

function dynamicAttributes(attribute, value){
  var opts = {};
  if(typeof value !== 'undefined' && value !== null) {
    opts['"'+attribute+'"'] = value;
    return opts;
  }
  return false;
};

निम्नलिखित की तरह अपनी प्रतिक्रिया घटक में कॉल करें

<ReactComponent {...dynamicAttributes("disabled",false)}
{...dynamicAttributes("data-url",dataURL)}
{...dynamicAttributes("data-modal",true)} />

टिप्स:

1. आप dynamicAttributesएक सामान्य स्थान / उपयोगिताओं में कार्य कर सकते हैं और इसे सभी घटकों के उपयोग के लिए आयात कर सकते हैं

2. आप nullगतिशील विशेषता को प्रस्तुत नहीं करने के लिए मान पारित कर सकते हैं

Comments

ऐसा क्यों न करें: <ReactComponent {... {"data-url": dataURL}} />? यह सरल है और कोई "डायनेमिक एट्रिब्यूट्स" की जरूरत नहीं है

— gdbdable

विशेषता के मामले में अशक्त है, हम उस विशेषता को प्रस्तुत करने के लिए प्रतिक्रिया नहीं चाहते हैं। उदाहरण: "data-modal": null हम डेटा-मॉडल = "null" दिखाने के लिए प्रतिक्रिया नहीं चाहते हैं। इस मामले में मेरे उपरोक्त कोड अभिप्रेत भी नहीं है, यानी मूल्य के आधार पर गतिशील विशेषता।

— वेंकट रेड्डी

Answer 5

आप दस्तावेज़ में इसके समान कुछ पा सकते हैं।

https://facebook.github.io/react/docs/transferring-props.html

आपके मामले में ऐसा कुछ हो सकता है

function MyComponent(props) {
    let { disabled, ...attrs } = props;
    if (disabled) {
        // thus, it will has the disabled attribute only if it
        // is disabled
        attrs = {
            ...attrs,
            disabled: true
        }
    };

    return (
        <button {...attrs}>MyLabel</button>
    )
}

यह कोड ES6 का उपयोग कर रहा है, लेकिन मुझे लगता है कि आपको विचार मिल गया है।

यह शांत है क्योंकि आप इस घटक को कई अन्य विशेषताओं को पारित कर सकते हैं और यह अभी भी काम करेगा।

Answer 6

मेरे द्वारा उपयोग किया गया संस्करण था:

<button disabled={disabled ? 'disabled' : undefined}>
    Click me (or dont)
</button>

Comments

अपने कोड में अपरिभाषित का उपयोग करना एक बुरा अभ्यास है। यह भी अनावश्यक है क्योंकि आप बस लिख सकते हैं <बटन अक्षम = {अक्षम}> के रूप में अक्षम रिटर्न या असली की तुलना में एक बूलियन चर है

— राफेल पिनेल

अनिर्धारित खराब अभ्यास क्यों है? यदि संभव हो तो प्रशस्ति पत्र। इसके अलावा शायद प्रतिक्रिया सही ढंग से अब बूल संभालती है, लेकिन अपने सुझाव लिखने के

— nhe

Answer 7

इसे करने का एक सरल और साफ तरीका

<button {...disabled && {disabled: true}}>Clear cart</button>

विकलांगों को इस तरह से सहारा देना चाहिए

<MyComponent disabled />

Answer 8

स्वीकृत समाधान की तुलना में सुदूर क्लीनर वह समाधान है जिसका उल्लेख अनिलरेडशिफ्ट ने किया था, लेकिन जिसका मैं विस्तार करूंगा।

सीधे शब्दों में कहें, HTML विशेषताओं का एक नाम और एक मूल्य है। एक आशुलिपि के रूप में, आप केवल "अक्षम", "एकाधिक", आदि के लिए नाम का उपयोग कर सकते हैं, लेकिन लॉन्गहैंड संस्करण अभी भी काम करता है, और प्रतिक्रिया के लिए इसे पसंदीदा तरीके से काम करने देता है।

disabled={disabled ? 'disabled' : undefined} सबसे सुपाच्य समाधान है।

Answer 9

पहले आप बस जाँच कर सकते हैं

<button disabled={true}>Button 1</button>
<button disabled={false}>Button 2</button>

नोट: ** अक्षम मान स्ट्रिंग नहीं है, यह बूलियन होना चाहिए ।

अब गतिशील के लिए। आप बस लिख सकते हैं

<button type="button" disabled={disable}  
        onClick={()=>this.setSelectValue('sms')} >{this.state.sms}</button>

जैसा कि आप देख सकते हैं कि मैं अक्षम संपत्ति का उपयोग कर रहा हूं और घुंघराले ब्रैकेट में यह स्थानीय चर / राज्य संस्करण हो सकता है। चर disableमें मान / सत्य गलत हैं।

Answer 10

यह काम कर सकता है, विकलांगों के साथ समस्या यह है कि इसके लिए बस बूलियन सेट नहीं किया जा सकता है।

if(AppStore.cartIsEmpty()){
  return "<button disabled>Clear cart</button>"
}
else
{
  return "<button>Clear cart</button>"
}

Comments

मुझे डर था कि मुझे इसका सहारा लेना पड़ सकता है .. मैं इंतजार करूँगा कि आपके जवाब को स्वीकार करने से पहले किसी और के पास कोई सुझाव हो

— टिम्मी