सशर्त तत्व कैसे हों और DRY को Facebook React के JSX के साथ रखें?

Question

मैं वैकल्पिक रूप से JSX में एक तत्व कैसे शामिल करूं? यहां एक बैनर का उपयोग करके एक उदाहरण दिया गया है जो घटक में होना चाहिए यदि इसे पारित किया गया है। जो मैं बचना चाहता हूं वह है कि यदि कथन में HTML टैग की नकल की जा रही है।

render: function () {
    var banner;
    if (this.state.banner) {
        banner = <div id="banner">{this.state.banner}</div>;
    } else {
        banner = ?????
    }
    return (
        <div id="page">
            {banner}
            <div id="other-content">
                blah blah blah...
            </div>
        </div>
    );
}

Comments

क्या होगा यदि आपके पास बस एक elseशाखा नहीं है , क्या वह काम करता है? मैं jsx से परिचित नहीं हूँ ...

— टॉम फेनेच

अच्छा लगा, इससे मदद मिली। इसके अलावा github.com/facebook/react/issues/690

— Gabriel Florit

प्रतिक्रिया में सशर्त प्रतिपादन करने के लिए विकल्पों की विस्तृत सूची: robinwieruch.de/conditional-rendering-react

— Robin Wieruch

Answer 1

अपरिभाषित होने के नाते केवल बैनर छोड़ दें और यह शामिल नहीं होता है।

Comments

मैं उस जवाब के आगे कुछ भी नहीं सोच सकता लेकिन ... जैसे ही मैं देवताओं पर ठोकर खाई

— टिमरज़

क्या nullसिर्फ काम ही ऐसा है undefined? इसके अलावा उस युक्ति का वह हिस्सा जो यह इस तरह काम करता है और इस तरह भविष्य में टूटने की संभावना नहीं है?

— हिप्पिएट्रिल

Answer 2

इस बारे में क्या। आइए एक सरल मदद Ifघटक को परिभाषित करें ।

var If = React.createClass({
    render: function() {
        if (this.props.test) {
            return this.props.children;
        }
        else {
            return false;
        }
    }
});

और इसे इस तरह से उपयोग करें:

render: function () {
    return (
        <div id="page">
            <If test={this.state.banner}>
                <div id="banner">{this.state.banner}</div>
            </If>
            <div id="other-content">
                blah blah blah...
            </div>
        </div>
    );
}

अद्यतन: जैसा कि मेरा जवाब लोकप्रिय हो रहा है, मैं आपको इस समाधान से संबंधित सबसे बड़े खतरे के बारे में चेतावनी देने के लिए बाध्य महसूस करता हूं। जैसा कि एक अन्य जवाब में कहा गया है, <If />घटक के अंदर कोड को हमेशा निष्पादित किया जाता है, भले ही यह शर्त सही हो या गलत। इसलिए निम्नलिखित उदाहरण मामले में असफल हो जायेगी bannerहै null(दूसरी पंक्ति पर संपत्ति का उपयोग पर ध्यान दें):

<If test={this.state.banner}>
    <div id="banner">{this.state.banner.url}</div>
</If>

इसका उपयोग करते समय आपको सावधान रहना होगा। मेरा सुझाव है कि वैकल्पिक (सुरक्षित) दृष्टिकोणों के लिए अन्य उत्तर पढ़ें।

अद्यतन 2: पीछे मुड़कर देखें, तो यह दृष्टिकोण न केवल खतरनाक है, बल्कि सख्त बोझिल भी है। यह एक विशिष्ट उदाहरण है जब एक डेवलपर (मुझे) पैटर्न को स्थानांतरित करने की कोशिश करता है और वह एक क्षेत्र से दूसरे क्षेत्र में जानता है, लेकिन यह वास्तव में (इस मामले में अन्य टेम्पलेट भाषाओं में) काम नहीं करता है।

यदि आपको एक सशर्त तत्व की आवश्यकता है, तो इसे इस तरह से करें:

render: function () {
    return (
        <div id="page">
            {this.state.banner &&
                <div id="banner">{this.state.banner}</div>}
            <div id="other-content">
                blah blah blah...
            </div>
        </div>
    );
}

यदि आपको दूसरी शाखा की भी आवश्यकता है, तो बस एक टर्नरी ऑपरेटर का उपयोग करें:

{this.state.banner ?
   <div id="banner">{this.state.banner}</div> :
   <div>There is no banner!</div>
}

यह रास्ता छोटा, अधिक सुरुचिपूर्ण और सुरक्षित है। मैं इसका हर समय उपयोग करता हूं। इसका एकमात्र नुकसान यह है कि आप else ifआसानी से ब्रांचिंग नहीं कर सकते हैं लेकिन यह आमतौर पर उतना सामान्य नहीं है।

वैसे भी, यह संभव है कि जावास्क्रिप्ट काम में तार्किक ऑपरेटरों के लिए धन्यवाद । तार्किक ऑपरेटर भी इस तरह से कम चाल की अनुमति देते हैं:

<h3>{this.state.banner.title || 'Default banner title'}</h3>

Comments

धन्यवाद। मैं इस github.com/facebook/react/issues/690 को पढ़ने की सलाह देता हूं। इस लिंक को इस सवाल के जवाब में पोस्ट किया गया है और मैंने अपना समाधान पोस्ट करने के बाद इसे देखा। यदि आप इसकी जांच करते हैं, तो कुछ लोग इस समाधान का भी उल्लेख करते हैं, लेकिन इसकी अनुशंसा नहीं करते हैं। मुझे व्यक्तिगत रूप से लगता है कि यह ठीक है, कम से कम ओपी के मामले में, लेकिन यह सच है कि यह तरीका सही नहीं है (उदाहरण के लिए और शाखा को परिभाषित करने का कोई अच्छा तरीका नहीं है)। वैसे भी, यह पढ़ने लायक है।

— तोबिक

यकीन नहीं होता है कि अगर यह अभी भी नवीनतम संस्करण के रूप में काम करता है तो लौटाए गए मूल्य की आवश्यकता प्रतीत होती हैReactElement

— srph

बस इसे किसी अन्य तत्व के साथ लपेटें, <span>या <div>।

— तोबिक

कोई समस्या है जब मैंने <td> या <table> में खाली करने के लिए इसका उपयोग करने की कोशिश की, क्योंकि <noscript> <tr> के लिए एक बच्चे के रूप में स्वीकार्य नहीं है। अन्यथा यह मेरे लिए ठीक काम करता है।

— ग्रीन सु

: यदि आप ऐसा करने जा रहे हैं, वहाँ एक transpilation विधि है कि बहुत अच्छी है npmjs.com/package/jsx-control-statements

— स्टीव

Answer 3

व्यक्तिगत रूप से, मुझे वास्तव में लगता है कि टर्नरी एक्सप्रेशन शो ( जेएसएक्स इन डेप्थ ) सबसे प्राकृतिक तरीका है जो कि रिएक्टजस मानकों के अनुरूप है।

निम्न उदाहरण देखें। यह पहली नजर में थोड़ा गड़बड़ है लेकिन काफी अच्छा काम करता है।

<div id="page">
  {this.state.banner ? (
    <div id="banner">
     <div class="another-div">
       {this.state.banner}
     </div>
    </div>
  ) : 
  null} 
  <div id="other-content">
    blah blah blah...
  </div>
</div>

Comments

नोट: कोष्ठक एक घटक रिटर्न के समान है, इसलिए आपकी सामग्री को <div> </ div> से घिरा होना चाहिए।

— जोटीडे

@Chiedo क्यों आप इसके बजाय लोकप्रिय जवाब पसंद करते हैं? यह महान काम करने लगता है।

— स्नोमैन

@ मुझे लगता है कि लोकप्रिय जवाब अधिक गतिशील है और एक क्लीनर रेंडर फ़ंक्शन में परिणाम है। इस दृष्टिकोण के साथ, यदि आपके पास कई सशर्त हैं तो क्या होता है? अब आपके पास इस अजीब प्रारूप के साथ घोंसले के शिकार का पागलपन होगा और अगर दो अलग-अलग क्षेत्रों में सशर्त के आधार पर समान परिवर्तनों की आवश्यकता होती है, तो आपको अब सशर्त को फिर से लिखना होगा। बस मेरी राय हालांकि! :)

— चिदो

एक संबंधित पृष्ठ भी काफी उपयोगी है: facebook.github.io/react/docs/…

— नील

Answer 4

आप इसे भी लिख सकते हैं

{ this.state.banner && <div>{...}</div> }

यदि आपका state.bannerहै nullया undefined, हालत के दाईं ओर छोड़ दिया है।

Answer 5

Ifशैली घटक खतरनाक है क्योंकि कोड ब्लॉक है हमेशा मार डाला हालत की परवाह किए बिना। उदाहरण के लिए, इस एक अशक्त अपवाद का कारण होता है, तो bannerहै null:

//dangerous
render: function () {
  return (
    <div id="page">
      <If test={this.state.banner}>
        <img src={this.state.banner.src} />
      </If>
      <div id="other-content">
         blah blah blah...
      </div>
    </div>
  );
}

एक अन्य विकल्प इनलाइन फ़ंक्शन (विशेष रूप से अन्य स्टेटमेंट के साथ उपयोगी) का उपयोग करना है:

render: function () {
  return (
    <div id="page">
      {function(){
        if (this.state.banner) {
          return <div id="banner">{this.state.banner}</div>
        }
      }.call(this)}
      <div id="other-content">
         blah blah blah...
      </div>
    </div>
  );
}

प्रतिक्रिया मुद्दों से एक और विकल्प :

render: function () {
  return (
    <div id="page">
      { this.state.banner &&
        <div id="banner">{this.state.banner}</div>
      }
      <div id="other-content">
         blah blah blah...
      </div>
    </div>
  );
}

Comments

अब तक के सभी समाधानों में, इनलाइन फ़ंक्शन सबसे सुरुचिपूर्ण और सीधे आगे लगता है। कुछ भी है कि एक के लिए बाहर देखना चाहिए?

— सूर्याशंकर

Answer 6

+& + कोड-शैली + छोटे घटक

यह सरल परीक्षण वाक्य रचना + कोड-शैली सम्मेलन + छोटे केंद्रित घटक मेरे लिए सबसे पठनीय विकल्प है। आपको बस नकली मूल्यों का विशेष ध्यान रखने की आवश्यकता है false, 0या ""।

render: function() {
    var person= ...; 
    var counter= ...; 
    return (
       <div className="component">
          {person && (
            <Person person={person}/>
          )}
          {(typeof counter !== 'undefined') && (
            <Counter value={counter}/>
          )}
       </div>
    );
}

अंकन

ES7 स्टेज -0 नोटेशन सिंटैक्स भी बहुत अच्छा है और मैं निश्चित रूप से इसका उपयोग तब करूंगा जब मेरी आईडीई इसे सही तरीके से समर्थन करती है:

const Users = ({users}) => (
  <div>
    {users.map(user =>
      <User key={user.id} user={user}/>
    )}
  </div>
)  

const UserList = ({users}) => do {
  if (!users) <div>Loading</div>
  else if (!users.length) <div>Empty</div>
  else <Users users={users}/>
}

---

यहाँ अधिक विवरण: ReactJs - एक "अगर" घटक ... एक अच्छा विचार है?

Comments

नि: शुल्क गैर-बुनियादी जानकारी: पहले वाले को कहा जाता हैshort-circuit syntax

— sospedra

@Deerloper मुझे लगता है कि && के बीच का अंतर और & amp; कंप्यूटर स्कूलों में सीखी गई पहली चीजों में से एक है, लेकिन कुछ लोगों को पता नहीं हो सकता है इसलिए यह अधिक स्पष्टीकरण देने के लिए एक बुरा विचार नहीं है: en.wikipedia.org/wiki/Sort-circuit_evaluation

— सेबेस्टियन लॉर्बर

सच है, लेकिन वे इसे क्लासिक सशर्त बयानों के हिस्से के रूप में पढ़ाते हैं। मैंने बहुत से लोगों को एक प्रतिक्रिया घटक को प्रस्तुत करने के लिए शॉर्ट-सर्किट का उपयोग करने के बारे में उलझन में पाया है;)

— sospedra

Answer 7

सरल, एक समारोह बनाएँ।

renderBanner: function() {
  if (!this.state.banner) return;
  return (
    <div id="banner">{this.state.banner}</div>
  );
},

render: function () {
  return (
    <div id="page">
      {this.renderBanner()}
      <div id="other-content">
        blah blah blah...
      </div>
    </div>
  );
}

यह एक पैटर्न है जिसका मैं व्यक्तिगत रूप से हर समय अनुसरण करता हूं। कोड वास्तव में साफ और समझने में आसान बनाता है। Bannerयदि यह बहुत बड़ा हो जाता है (या अन्य स्थानों पर फिर से उपयोग किया जाता है) तो आप इसे अपने स्वयं के घटक में रिफैक्ट करने की अनुमति देते हैं।

Answer 8

प्रयोगात्मक ES7 doसिंटैक्स इसे आसान बनाता है। यदि आप बैबल का उपयोग कर रहे हैं, es7.doExpressionsतो इस सुविधा को सक्षम करें :

render() {
  return (
    <div id="banner">
      {do {
        if (this.state.banner) {
          this.state.banner;
        } else {
          "Something else";
        }
      }}
    </div>
  );
}

Http://wiki.ecmascript.org/doku.php?id=strawman:do_expressions देखें

Answer 9

जैसा कि पहले ही जवाब में बताया गया है, JSX आपको दो विकल्पों के साथ प्रस्तुत करता है

• टर्नरी ऑपरेटर

  { this.state.price ? <div>{this.state.price}</div> : null }

• तार्किक संयोजन

  { this.state.price && <div>{this.state.price}</div> }

---

हालांकि, उन लोगों के लिए काम नहीं करते price == 0 ।

JSX पहले मामले में झूठी शाखा को प्रस्तुत करेगा और तार्किक संयोजन के मामले में, कुछ भी प्रदान नहीं किया जाएगा। यदि संपत्ति 0 हो सकती है, तो बस उपयोग करें यदि आपके जेएसएक्स के बाहर के बयान।

Comments

यह एक JSX मुद्दा नहीं है। यह स्वयं की स्थिति है, यहां तक ​​कि सादे जेएस में भी ऐसा ही व्यवहार होगा। यदि आप कोई संख्या चाहते हैं, तो बस typeof(this.state.price) === "number"शर्त के रूप में (या तो संस्करण में) का उपयोग करें।

— क्रोल्टन

Answer 10

यह घटक तब काम करता है जब आपके पास "if" शाखा में एक से अधिक तत्व हों:

var Display = React.createClass({
  render: function () {
    if (!this.props.when) {
      return false;
    }
    return React.DOM.div(null, this.props.children);
  },
});

उपयोग:

render: function() {
  return (
    <div>
      <Display when={this.state.loading}>
        Loading something...
        <div>Elem1</div>
        <div>Elem2</div>
      </Display>
      <Display when={!this.state.loading}>
        Loaded
        <div>Elem3</div>
        <div>Elem4</div>
      </Display>
    </div>
  );
}

Ps किसी को लगता है कि ये घटक कोड पढ़ने के लिए अच्छे नहीं हैं। लेकिन मेरे दिमाग में, जावास्क्रिप्ट के साथ Html बदतर है

Comments

यदि यहाँ दिए गए उत्तर की तरह, यह तब भी झूठी स्थिति को निष्पादित करेगा भले ही वह प्रदर्शित न हो।

— कीगन 82

Answer 11

अधिकांश उदाहरण "html" की एक पंक्ति के साथ हैं जो सशर्त रूप से प्रस्तुत किए गए हैं। यह मेरे लिए पठनीय लगता है जब मेरे पास कई लाइनें हैं जिन्हें सशर्त रूप से प्रस्तुत करने की आवश्यकता है।

render: function() {
  // This will be renered only if showContent prop is true
  var content = 
    <div>
      <p>something here</p>
      <p>more here</p>
      <p>and more here</p>
    </div>;

  return (
    <div>
      <h1>Some title</h1>

      {this.props.showContent ? content : null}
    </div>
  );
}

पहला उदाहरण अच्छा है क्योंकि इसके बजाय nullहम सशर्त रूप से कुछ अन्य सामग्री को प्रस्तुत कर सकते हैं{this.props.showContent ? content : otherContent}

लेकिन अगर आपको केवल सामग्री दिखाने / छिपाने की आवश्यकता है, तो यह बूलियंस, नल और अनडिफ़ाइंड आर इग्नोर किए जाने के बाद भी बेहतर है

render: function() {
  return (
    <div>
      <h1>Some title</h1>

      // This will be renered only if showContent prop is true
      {this.props.showContent &&
        <div>
          <p>something here</p>
          <p>more here</p>
          <p>and more here</p>
        </div>
      }
    </div>
  );
}

Answer 12

एक और उपाय है, यदि प्रतिक्रिया के लिए घटक :

var Node = require('react-if-comp');
...
render: function() {
    return (
        <div id="page">
            <Node if={this.state.banner}
                  then={<div id="banner">{this.state.banner}</div>} />
            <div id="other-content">
                blah blah blah...
            </div>
        </div>
    );
}

Answer 13

मैं एक अधिक स्पष्ट शॉर्टकट का उपयोग करता हूं: एक तत्काल-आमंत्रित फ़ंक्शन अभिव्यक्ति (IIFE):

{(() => {
  if (isEmpty(routine.queries)) {
    return <Grid devices={devices} routine={routine} configure={() => this.setState({configured: true})}/>
  } else if (this.state.configured) {
    return <DeviceList devices={devices} routine={routine} configure={() => this.setState({configured: false})}/>
  } else {
    return <Grid devices={devices} routine={routine} configure={() => this.setState({configured: true})}/>
  }
})()}

Answer 14

मैंने इसे आसान बनाने के लिए https://www.npmjs.com/package/jsx-control-statements किए , मूल रूप से यह आपको <If>सशर्त को टैग के रूप में परिभाषित करने की अनुमति देता है और फिर उन्हें टर्नरी इफ़ेक्ट में संकलित करता है ताकि कोड <If>केवल अंदर हो जाए निष्पादित अगर हालत सच है।

Answer 15

वहाँ भी एक बहुत साफ एक लाइन संस्करण है ... {this.props.product.title || "कोई शीर्षक नहीं" }

अर्थात:

render: function() {
            return (
                <div className="title">
                    { this.props.product.title || "No Title" }
                </div>
            );
        }

Comments

क्या यह मेरे नमूने के ऊपर काम करता है? यदि बैनर प्रॉप नहीं है तो बैनर div दिखाई नहीं देना चाहिए?

— जैक एलन

Answer 16

मैंने हाल ही में https://github.com/ajwhite/render-if को तत्वों को सुरक्षित रूप से प्रस्तुत करने के लिए बनाया है, यदि विधेय पास हो ।

{renderIf(1 + 1 === 2)(
  <span>Hello!</span>
)}

या

const ifUniverseIsWorking = renderIf(1 + 1 === 2);

//...

{ifUniverseIsWorking(
  <span>Hello!</span>
)}

Answer 17

आप सशर्त रूप से इस तरह टर्नरी ऑपरेटर का उपयोग करने वाले तत्वों को शामिल कर सकते हैं:

render: function(){

         return <div id="page">

                  //conditional statement
                  {this.state.banner ? <div id="banner">{this.state.banner}</div> : null}

                  <div id="other-content">
                      blah blah blah...
                  </div>

               </div>
}

Answer 18

आप एक फ़ंक्शन का उपयोग कर सकते हैं और घटक को वापस कर सकते हैं और रेंडर फ़ंक्शन को पतला रख सकते हैं

class App extends React.Component {
  constructor (props) {
    super(props);
    this._renderAppBar = this._renderAppBar.bind(this);
  }

  render () {
    return <div>
      {_renderAppBar()}

      <div>Content</div>

    </div>
  }

  _renderAppBar () {
    if (this.state.renderAppBar) {
      return <AppBar />
    }
  }
}

Answer 19

यहाँ मेरा दृष्टिकोण ES6 का उपयोग कर रहा है।

import React, { Component } from 'react';
// you should use ReactDOM.render instad of React.renderComponent
import ReactDOM from 'react-dom';

class ToggleBox extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // toggle box is closed initially
      opened: false,
    };
    // http://egorsmirnov.me/2015/08/16/react-and-es6-part3.html
    this.toggleBox = this.toggleBox.bind(this);
  }

  toggleBox() {
    // check if box is currently opened
    const { opened } = this.state;
    this.setState({
      // toggle value of `opened`
      opened: !opened,
    });
  }

  render() {
    const { title, children } = this.props;
    const { opened } = this.state;
    return (
      <div className="box">
        <div className="boxTitle" onClick={this.toggleBox}>
          {title}
        </div>
        {opened && children && (
          <div class="boxContent">
            {children}
          </div>
        )}
      </div>
    );
  }
}

ReactDOM.render((
  <ToggleBox title="Click me">
    <div>Some content</div>
  </ToggleBox>
), document.getElementById('app'));

डेमो: http://jsfiddle.net/kb3gN/16688/

मैं कोड का उपयोग कर रहा हूँ जैसे:

{opened && <SomeElement />}

यह SomeElementकेवल तभी प्रस्तुत होगा जब openedसत्य हो। यह इस बात के कारण काम करता है कि कैसे जावास्क्रिप्ट तार्किक स्थितियों को हल करता है:

true && true && 2; // will output 2
true && false && 2; // will output false
true && 'some string'; // will output 'some string'
opened && <SomeElement />; // will output SomeElement if `opened` is true, will output false otherwise

जैसा कि Reactनजरअंदाज करेंगे false, मुझे कुछ तत्वों को सशर्त रूप से प्रस्तुत करने का यह बहुत अच्छा तरीका लगता है।

Answer 20

हो सकता है कि यह किसी ऐसे व्यक्ति की मदद करे, जो इस सवाल पर आता है: प्रतिक्रिया में सभी सशर्त रेंडरिंग यह प्रतिक्रिया में सशर्त प्रतिपादन के सभी विभिन्न विकल्पों के बारे में एक लेख है।

कब कौन से सशर्त प्रतिपादन का उपयोग करना है, इसके मुख्य अंश:

** यदि नहीं तो

• सबसे बुनियादी सशर्त प्रतिपादन है
• शुरुआत के अनुकूल
• नल वापस करके एक रेंडर विधि से जल्दी से ऑप्ट-आउट करने के लिए उपयोग करें

** टर्नरी ऑपरेटर

• एक से इतर बयान पर इसका इस्तेमाल करें
• अगर-और की तुलना में यह अधिक संक्षिप्त है

** तार्किक और& ऑपरेटर

• इसका उपयोग तब करें जब टर्नरी ऑपरेशन के एक तरफ नल वापस आ जाएगा

** स्विच केस

• वाचाल
• केवल स्व-आह्वान समारोह के साथ इनलेट किया जा सकता है
• इससे बचें, इसके बजाय एनम का उपयोग करें

** एनम

• विभिन्न राज्यों के नक्शे के लिए एकदम सही
• एक से अधिक शर्तो को पूरा करने के लिए एकदम सही

** बहु-स्तरीय / नेस्टेड सशर्त रेंडरिंग

• पठनीयता के लिए उनसे बचें
• अपने स्वयं के सरल सशर्त प्रतिपादन के साथ घटकों को और अधिक हल्के घटकों में विभाजित करें
• HOCs का उपयोग करें

** एचओसी

• सशर्त प्रतिपादन को दूर करने के लिए उनका उपयोग करें
• घटक अपने मुख्य उद्देश्य पर ध्यान केंद्रित कर सकते हैं

** बाहरी टेम्प्लेटिंग घटक

• उनसे बचें और JSX और जावास्क्रिप्ट के साथ सहज रहें

Answer 21

ES6 के साथ आप इसे साधारण वन-लाइनर के साथ कर सकते हैं

const If = ({children, show}) => show ? children : null

"शो" एक बूलियन है और आप इस वर्ग का उपयोग करते हैं

<If show={true}> Will show </If>
<If show={false}> WON'T show </div> </If>

Comments

खराब। इसकी गणना की जाएगी।

— क्वर्टी

Answer 22

मुझे नहीं लगता कि इसका उल्लेख किया गया है। यह आपके अपने उत्तर की तरह है लेकिन मुझे लगता है कि यह और भी सरल है। आप हमेशा अभिव्यक्तियों से स्ट्रिंग्स वापस कर सकते हैं और आप भावों के अंदर jsx घोंसला कर सकते हैं, इसलिए यह इनलाइन अभिव्यक्ति को पढ़ने में आसान बनाता है।

render: function () {
    return (
        <div id="page">
            {this.state.banner ? <div id="banner">{this.state.banner}</div> : ''}
            <div id="other-content">
                blah blah blah...
            </div>
        </div>
    );
}

<script src="http://dragon.ak.fbcdn.net/hphotos-ak-xpf1/t39.3284-6/10574688_1565081647062540_1607884640_n.js"></script>
<script src="http://dragon.ak.fbcdn.net/hphotos-ak-xpa1/t39.3284-6/10541015_309770302547476_509859315_n.js"></script>
<script type="text/jsx;harmony=true">void function() { "use strict";

var Hello = React.createClass({
  render: function() {
    return (
      <div id="page">
        {this.props.banner ? <div id="banner">{this.props.banner}</div> : ''}
        <div id="other-content">
          blah blah blah...
        </div>
      </div>
    );   
  }
});

var element = <div><Hello /><Hello banner="banner"/></div>;
React.render(element, document.body);

}()</script>

Answer 23

मैं की तुरंत-लागू समारोह भाव (मुखरता की तरह IIFE) और if-elseअधिक render callbacksऔर ternary operators।

render() {
  return (
    <div id="page">
      {(() => (
        const { banner } = this.state;
        if (banner) {
          return (
            <div id="banner">{banner}</div>
          );
        }
        // Default
        return (
          <div>???</div>
        );
      ))()}
      <div id="other-content">
        blah blah blah...
      </div>
    </div>
  );
}

आपको IIFEसिंटैक्स से परिचित होने की आवश्यकता {expression}है, सामान्य रिएक्ट सिंटैक्स है, इसके अंदर यह विचार करें कि आप एक फ़ंक्शन लिख रहे हैं जो स्वयं को आमंत्रित कर रहा है।

function() {

}()

जिसे परनों के अंदर लपेटना होगा

(function() {

}())

Answer 24

वहाँ भी एक तकनीक है जो एक घटक को सशर्त रेंडर करने के लिए रेंडर प्रॉप्स का उपयोग करती है । यह लाभ है कि रेंडर का मूल्यांकन तब तक नहीं किया जाएगा जब तक कि शर्त पूरी न हो जाए, जिसके परिणामस्वरूप अशक्त और अपरिभाषित मूल्यों के लिए कोई चिंता नहीं है ।

const Conditional = ({ condition, render }) => {
  if (condition) {
    return render();
  }
  return null;
};

class App extends React.Component {
  constructor() {
    super();
    this.state = { items: null }
  }

  componentWillMount() {
    setTimeout(() => { this.setState({ items: [1,2] }) }, 2000);
  }

  render() {
    return (
      <Conditional
        condition={!!this.state.items}
        render={() => (
          <div>
            {this.state.items.map(value => <p>{value}</p>)}
          </div>
        )}
      />
    )
  }
}

Answer 25

जब पास की शर्त पूरी हो जाने पर केवल कुछ रेंडर करने के लिए, आप सिंटैक्स का उपयोग कर सकते हैं:

{ condition && what_to_render }

इस तरह से कोड इस तरह दिखेगा:

render() {
    const { banner } = this.state;
    return (
        <div id="page">
            { banner && <div id="banner">{banner}</div> }
            <div id="other-content">
                blah blah blah...
            </div>
        </div>
    );
}

बेशक, ऐसा करने के लिए अन्य वैध तरीके हैं, यह सभी वरीयताओं और अवसरों के लिए है। आप इस लेख में React में सशर्त प्रतिपादन कैसे करें पर अधिक तरीके सीख सकते हैं यदि आप रुचि रखते हैं!

Answer 26

बस एक और विकल्प जोड़ने के लिए - यदि आप कॉफी-स्क्रिप्ट को पसंद करते हैं / सहन करते हैं, तो आप अपने JSX को लिखने के लिए कॉफी-रिएक्शन का उपयोग कर सकते हैं, इस मामले में यदि / नहीं तो कथन प्रयोग करने योग्य हैं क्योंकि वे कॉफी-स्क्रिप्ट में अभिव्यक्तियाँ हैं और कथन नहीं:

render: ->
  <div className="container">
    {
      if something
        <h2>Coffeescript is magic!</h2>
      else
        <h2>Coffeescript sucks!</h2>
    }
  </div>  

Answer 27

डॉक्स के संदर्भ में बस @ जेक एलन उत्तर का विस्तार करने के लिए।

रिएक्ट बेसिक (क्विक स्टार्ट) प्रलेखन null ऐसे मामले में सुझाव देता है। हालांकि, उन्नत गाइड में उल्लिखित बूलियन, नल और अनडिफ़ाइंड को भी अनदेखा किया गया है।

Comments

स्पष्ट करने के लिए सही - गलत, अशक्त, अपरिभाषित और सत्य को अनदेखा किया जाना मान्य है - facebook.github.io/react/docs/… । हालांकि, क्विक स्टार्ट में वे अशक्त सलाह देना पसंद करते हैं।

— ओलेग वी।