मैं प्रतिक्रियाशील घटकों में सशर्त रूप से विशेषताएँ कैसे जोड़ूँ?

Question

क्या किसी निश्चित स्थिति के पूरा होने पर केवल अभिक्रिया घटक में विशेषताओं को जोड़ने का एक तरीका है?

मैं प्रस्तुत करने के बाद एक अजाक्स कॉल के आधार पर तत्वों को बनाने के लिए आवश्यक और आसानी से विशेषताएँ जोड़ने वाला हूं, लेकिन मैं यह नहीं देख सकता कि इसे कैसे हल किया जाए क्योंकि readOnly = "false" पूरी तरह से विशेषता को छोड़ने के समान नहीं है।

नीचे दिए गए उदाहरण में बताया गया है कि मुझे क्या चाहिए, लेकिन यह काम नहीं करेगा (पार्स त्रुटि: अप्रत्याशित पहचानकर्ता)।

var React = require('React');

var MyOwnInput = React.createClass({
    render: function () {
        return (
            <div>
                <input type="text" onChange={this.changeValue} value={this.getValue()} name={this.props.name}/>
            </div>
        );
    }
});

module.exports = React.createClass({
    getInitialState: function () {
        return {
            isRequired: false
        }
    },
    componentDidMount: function () {
        this.setState({
            isRequired: true
        });
    },
    render: function () {
        var isRequired = this.state.isRequired;

        return (
            <MyOwnInput name="test" {isRequired ? "required" : ""} />
        );
    }
});

Comments

हो सकता है कि एक टिप्पणी किसी की मदद करे, मुझे पता चला कि रिएक्ट 16.7 डोंट रेंडरर्स और घटक के एचटीएमएल विशेषताओं को अपडेट करता है यदि आपने उन्हें केवल एक स्टोर (फ़े रिडक्स) में बदल दिया और घटक से बंधा हुआ है। इसका मतलब है कि घटक में फ़े है aria-modal=true, आप बदलावों को झूठा (असत्य को) अरी / डेटा विशेषताओं के स्टोर में धकेल दें , लेकिन और कुछ नहीं बदला गया है (जैसे कि घटक की सामग्री या वर्ग या चर वहां) परिणाम के अनुसार ReactJs aria को अपडेट नहीं करेगा / डेटा घटकों में है। मुझे लगता है कि महसूस करने के लिए पूरे दिन के बारे में गड़बड़ कर रहा है।

— एलेक्सनिकोव

Answer 1

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

var InputComponent = React.createClass({
    render: function() {
        var required = true;
        var disabled = false;

        return (
            <input type="text" disabled={disabled} required={required} />
        );
    }
});

में परिणाम होगा:

<input type="text" required>

अद्यतन: अगर किसी को यह कैसे / क्यों होता है के लिए उत्सुक है, तो आप विशेष रूप से DOMProperty.js फ़ाइल की लाइनों 30 और 167 पर ReactDOM के स्रोत कोड में विवरण पा सकते हैं ।

Comments

आम तौर पर nullइसका मतलब है "जैसा काम करता है वैसा मैंने इसे बिल्कुल भी निर्दिष्ट नहीं किया है"। बूलियन डोम विशेषताओं के लिए सच / असत्य को विशेषता नाम / गलत को दोहराने पर पसंद किया जाता है, उदाहरण के <input disabled>लिएReact.createElement('input', {disabled: true})

— ब्रिगैंड जूल

मैं सहमत हूँ। मैं नाम दोहराता हूं क्योंकि मुझे कुछ ब्राउज़रों के साथ अतीत में समस्याएं हुई थीं और आदत मेरे साथ इतनी अधिक चिपक गई थी कि मैंने मैन्युअल रूप से ="required"भाग में जोड़ा । क्रोम ने वास्तव में मूल्य के बिना सिर्फ विशेषता को प्रस्तुत किया।

— जुडेनेमार्को

readonlyकभी नहीं जोड़ा जाता क्योंकि रिएक्ट विशेषता की उम्मीद कर रहा है readOnly(एक पूंजी ओ के साथ)।

— अधिकतम

धन्यवाद! सुनिश्चित करें कि मूल्य सिर्फ एक खाली स्ट्रिंग या शून्य नहीं है, ये हटाया नहीं जा सकता है। उदाहरण के लिए, आप इस तरह से एक मान पास कर सकते हैं, और यह सुनिश्चित करना चाहिए कि यदि यह गलत का मूल्यांकन करता है तो इसे हटा दिया जाए alt={props.alt || null}:।

— जेक

धन्यवाद, @ जेक। मैंने विशेषता सेट करने की कोशिश की थी false, लेकिन केवल nullयह सुनिश्चित किया कि विशेषता वास्तव में हटा दी गई थी।

— नाथन आर्थर

Answer 2

juandemarco का जवाब आमतौर पर सही है, लेकिन यहां एक और विकल्प है।

एक वस्तु बनाएं जो आपको पसंद हो:

var inputProps = {
  value: 'foo',
  onChange: this.handleChange
};

if (condition)
  inputProps.disabled = true;

प्रसार के साथ रेंडर, वैकल्पिक रूप से अन्य सहारा भी गुजर रहा है।

<input
    value="this is overridden by inputProps"
    {...inputProps}
    onChange={overridesInputProps}
 />

Comments

यह वास्तव में बहुत उपयोगी है, खासकर जब कई गुणों को सशर्त रूप से जोड़ते हैं (और मुझे व्यक्तिगत रूप से पता नहीं था कि यह इस तरह से किया जा सकता है)।

— जुडेनेमार्को

बहुत सुंदर है, लेकिन क्या यह इनपुट नहीं होना चाहिए।

— ५० पर जेपी

बहुत आसान है, मैंने कई स्थितियों के साथ अपने कोड को अधिक पठनीय बनाया है।

— नवीन कुमार पीजी

यदि कोई भी इस "चीनी" के सटीक शब्दार्थ के बारे में परवाह करता है, तो आप उस स्क्रिप्ट को देख सकते हैं जो आपके .jsx में ट्रांसफ़ेक्ट है, आप देखेंगे कि इसमें एक फ़ंक्शन _extendsजोड़ा गया है, जो (सामान्य परिस्थितियों में) propsनिर्माण से लेगा । "सामान्य गुण" और लागू होते हैं Object.assign(props, inputProps)।

— नाथन चैपल

Answer 3

यहाँ का उपयोग करने का एक उदाहरण है बूटस्ट्रैप के Buttonमाध्यम से प्रतिक्रिया-बूटस्ट्रैप (संस्करण 0.32.4):

var condition = true;

return (
  <Button {...(condition ? {bsStyle: 'success'} : {})} />
);

शर्त के आधार पर, या तो वापस {bsStyle: 'success'}कर दिया {}जाएगा। प्रसार ऑपरेटर फिर Buttonघटक को लौटे ऑब्जेक्ट के गुणों को फैलाएगा । झूठे मामले में, चूंकि लौटी हुई वस्तु पर कोई गुण मौजूद नहीं है, इसलिए घटक को कुछ भी पारित नहीं किया जाएगा।

---

एंडी पोलहिल की टिप्पणी पर आधारित एक वैकल्पिक तरीका :

var condition = true;

return (
  <Button bsStyle={condition ? 'success' : undefined} />
);

केवल एक छोटा सा अंतर यह है कि दूसरे उदाहरण में आंतरिक घटक <Button/>का मान के साथ एक propsकुंजी होगी ।bsStyleundefined

Comments

@Punit, प्रसार ऑपरेटर तो हालत पहले (या तो मूल्यांकन किया जाता है,, सशर्त ऑपरेटर की तुलना में कम पूर्वता है {bsStyle: 'success'}या {}यह से परिणाम), तो उस वस्तु प्रसार है।

— विक्टर ज़मानियन

क्या <Button bsStyle={ condition ? 'success': undefined } /> मैं निम्नलिखित सिंटैक्स को थोड़ा आसान undefinedकरूंगा , पास होने पर संपत्ति को छोड़ देंगे।

— एंडी पोलहिल

@AndyPolhill मुझे अच्छा लगता है और कोड को पढ़ने में बहुत आसान है, केवल एक छोटा सा अंतर यह है कि आपके कोड उदाहरण में आंतरिक घटक <Button/>की वैल्यू के साथ propsएक कुंजी होगी । bsStyleundefined

— अरमान येघियारीयन

@AndyPolhill कारण वाक्यविन्यास को पढ़ने के लिए कठिन लगता है क्योंकि यह कुछ निहित कोष्ठकों को याद कर रहा है जो उदाहरण को विदेशी और समझने में कठिन बनाता है। कोष्ठक जोड़ने के लिए उदाहरण का संपादन।

— गोविंद राय

पहली विधि ने मेरे लिए पूरी तरह से काम किया, धन्यवाद

— Liran H

Answer 4

यहाँ एक विकल्प है।

var condition = true;

var props = {
  value: 'foo',
  ...( condition && { disabled: true } )
};

var component = <div { ...props } />;

या इसका इनलाइन संस्करण

var condition = true;

var component = (
  <div
    value="foo"
    { ...( condition && { disabled: true } ) } />
);

Comments

मुझे यह दृष्टिकोण पसंद है, यह मुझे मेरे काम करने वालों के बीच शांत करता है। एक तरफ से हटकर, इसके लुक से, प्रॉपर बस एक महत्वपूर्ण-मूल्य जोड़ी के रूप में पारित हो जाते हैं, क्या यह सही है?

— जॉनीक्यू

यदि conditionयह गलत है, तो यह गलत तरीके से विस्तार / पुनरावृति करने की कोशिश करेगा, जो मुझे नहीं लगता कि सही है।

— लार्स Nyström

@ LarsNyström, यह समझ में आता है। प्रसार ऑपरेटर केवल पुनरावृत्तियों को स्वीकार करता है, जहां falseकोई भी नहीं है। बस बाबेल के साथ जांच करें। यह इसके साथ काम करता है जब conditionबाबेल ऑपरेटर को जिस तरह से लागू करता है, वह गलत का मूल्यांकन करता है । हालांकि एक तुच्छ वर्कअराउंड हो सकता है ...( condition ? { disabled: true } : {} ), फिर यह थोड़ा वर्बोज़ हो जाता है। इस अच्छे इनपुट के लिए धन्यवाद!

— सीजन

+1 यह दृष्टिकोण आवश्यक है यदि आप सशर्त रूप से आउटपुट data-*या aria-*विशेषताओं को चाहते हैं, क्योंकि वे JSX में एक विशेष मामला है, इसलिए विशेषता को छोड़ने के बजाय data-my-conditional-attr={ false }आउटपुट होगा data-my-conditional-attr="false"। facebook.github.io/react/docs/dom-elements.html

— ptim

Answer 5

यहाँ एक तरह से मैं यह कर रहा हूँ।

एक शर्त के साथ :

<Label
    {...{
      text: label,
      type,
      ...(tooltip && { tooltip }),
      isRequired: required
    }}
/>

मैं अभी भी नीचे गुजरने के नियमित तरीके का उपयोग करना पसंद करता हूं, क्योंकि यह अधिक सशर्त नहीं होने की स्थिति में अधिक पठनीय (मेरी राय में) है।

बिना किसी शर्त के :

<Label text={label} type={type} tooltip={tooltip} isRequired={required} />

Comments

आप कृपया कैसे इस हिस्से काम करता समझा सकते हैं - ...(tooltip && { tooltip }),? यह घटक पर काम करता है, लेकिन जब मैं इस तरह के कोड का उपयोग करने की कोशिश करता हूं तो मुझे एक त्रुटि मिलती है जिसका अर्थ है कि मैं गैर-

— चलने योग्य

शायद इसलिए कि falseyValue && {}झूठे वापस आ जाएंगे, इसलिए इसकी संभावना आप झूठ की तरह फैल रहे हैं ...(false)। पूर्ण अभिव्यक्ति का उपयोग करने के लिए बेहतर है ताकि प्रसार का व्यवहार जारी रहे ...(condition ? {foo: 'bar'} : {})

— lfender6445

Answer 6

आप उसी शॉर्टकट का उपयोग कर सकते हैं, जिसका उपयोग घटकों ( {isVisible && <SomeComponent />}) के भागों को जोड़ने / हटाने के लिए किया जाता है ।

class MyComponent extends React.Component {
  render() {
    return (
      <div someAttribute={someCondition && someValue} />
    );
  }
}

Comments

यदि someConditionसत्य है, लेकिन someValueमिथ्या है (उदाहरण falseके लिए, या 0, आदि), क्या विशेषता अभी भी शामिल है? यह महत्वपूर्ण है अगर यह स्पष्ट रूप से एक मिथ्या मूल्य शामिल करने के लिए आवश्यक है, उदाहरण के 0लिए एक समन्वय विशेषता के लिए, आदि

— एंड्रयू विल्स

आम तौर पर, विशेषता को छोड़ दिया जाता है, लेकिन इसके मामले में नहीं , data-*और aria-*ऊपर मेरी टिप्पणी देखें। यदि आप मान को उद्धृत करते हैं, या इसे स्ट्रिंग के रूप में someAttr={ `${falsyValue}` }someAttr="false"

— डालते हैं

Answer 7

मान लें कि हम एक शर्त जोड़ना चाहते हैं (यदि aria- * या डेटा- * का उपयोग कर) एक शर्त सच है:

{...this.props.isTrue && {'aria-name' : 'something here'}}

मान लें कि हम एक शैली संपत्ति जोड़ना चाहते हैं यदि कोई शर्त सत्य है:

{...this.props.isTrue && {style : {color: 'red'}}}

Answer 8

यदि आप ECMAScript 6 का उपयोग करते हैं, तो आप बस इस तरह लिख सकते हैं।

// First, create a wrap object.
const wrap = {
    [variableName]: true
}
// Then, use it
<SomeComponent {...{wrap}} />

Answer 9

यह काम करना चाहिए, क्योंकि अजाक्स कॉल के बाद आपका राज्य बदल जाएगा, और मूल घटक फिर से प्रस्तुत करना होगा।

render : function () {
    var item;
    if (this.state.isRequired) {
        item = <MyOwnInput attribute={'whatever'} />
    } else {
        item = <MyOwnInput />
    }
    return (
        <div>
            {item}
        </div>
    );
}

Answer 10

प्रतिक्रिया में आप घटक को सशर्त रूप से प्रस्तुत कर सकते हैं, लेकिन उनकी विशेषताएं, जैसे कि प्रॉपर, क्लासनेम, आईडी, और बहुत कुछ।

प्रतिक्रिया में यह टर्नरी ऑपरेटर का उपयोग करने के लिए बहुत अच्छा अभ्यास है जो आपको घटकों को सशर्त रूप से प्रस्तुत करने में मदद कर सकता है।

एक उदाहरण यह भी दिखाता है कि घटक और इसकी शैली विशेषता को सशर्त रूप से कैसे प्रस्तुत किया जाए।

ये रहा एक सरल उदाहरण:

class App extends React.Component {
  state = {
    isTrue: true
  };

  render() {
    return (
      <div>
        {this.state.isTrue ? (
          <button style={{ color: this.state.isTrue ? "red" : "blue" }}>
            I am rendered if TRUE
          </button>
        ) : (
          <button>I am rendered if FALSE</button>
        )}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

Comments

यह बहुत सारी विशेषताओं के साथ वास्तव में गड़बड़ हो सकता है। मुझे फैला हुआ वैरिएंट ज्यादा अच्छा लगता है।

— रेमी स्ट्योर

हां, आप सही हैं, लेकिन यह किसी ऐसे व्यक्ति के लिए है जिसे अवलोकन प्राप्त करने की आवश्यकता है मैं एक और उदाहरण बनाऊंगा। लेकिन चीजों को सरल रखना चाहते हैं।

— जुराज

Answer 11

JSX इन डेप्थ पोस्ट को ध्यान में रखते हुए , आप अपनी समस्या को इस तरह से हल कर सकते हैं:

if (isRequired) {
  return (
    <MyOwnInput name="test" required='required' />
  );
}
return (
    <MyOwnInput name="test" />
);