ReactJS

Question

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

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

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

Answer 1

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

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

Answer 2

यह काम कर सकता है, अक्षम के साथ समस्या यह है कि कोई भी इसके लिए बूलियन सेट नहीं कर सका।

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

Answer 3

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

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')); 

प्रसार विशेषताओं का उपयोग कर आप गतिशील (ओवरराइड जोड़ सकते हैं या कर सकते हैं:

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

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. भर में इसका इस्तेमाल करने के गतिशील विशेषता

Answer 5

आप प्रलेखन में इस के समान कुछ पा सकते हैं प्रदान नहीं करने के लिए आप null के रूप में मूल्य दे सकते हैं।

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

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

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

मूल रूप से, परीक्षण (bool) के आधार पर आप विशेषता के साथ एक ऑब्जेक्ट या आप एक वापसी खाली वस्तु

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

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

कामयाब रहा सुझाव है कि आप गुण JSX के बाहर के साथ (या) के बिना वस्तु पूर्वनिर्मित।

Answer 7

संस्करण मैं का इस्तेमाल किया गया था:

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