क्या प्रतिक्रिया रेंडर फ़ंक्शन में खाली लौटना संभव है?

Question

मेरे पास एक अधिसूचना घटक है, और मेरे पास इसके लिए एक टाइमआउट सेटिंग है। टाइमआउट के बाद मैं फोन करता हूं this.setState({isTimeout:true})।

मैं क्या करना चाहता हूं अगर पहले से ही समय समाप्त हो गया है, तो मैं सिर्फ कुछ भी नहीं सौंपना चाहता हूं:

  render() {
    let finalClasses = "" + (this.state.classes || "");
    if (isTimeout){
      return (); // here has some syntax error
    }
    return (<div>{this.props.children}</div>);
  }

समस्या यह है: वापसी (); // यहाँ कुछ सिंटैक्स त्रुटि है

Answer 1

हाँ आप कर सकते हैं, लेकिन खाली के बजाय, बस वापस लौटें nullयदि आप renderघटक से कुछ भी नहीं चाहते हैं, तो इस तरह से:

return (null);

---

एक और महत्वपूर्ण बिंदु है, जेएसएक्स के अंदर अगर आप सशर्त रूप से तत्व प्रदान कर रहे हैं, तो इसके मामले में condition=false, आप इनमें से किसी भी मान को वापस कर सकते हैं false, null, undefined, true। DOC के अनुसार :

booleans (true/false), null, and undefinedकर रहे हैं वैध बच्चों , वे साधन वे केवल प्रदान नहीं करते नजरअंदाज कर दिया जाएगा।

ये सभी JSXभाव एक ही चीज़ को प्रस्तुत करेंगे:

<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>

उदाहरण:

केवल विषम मान प्रदान किए जाएंगे, क्योंकि मानों के लिए भी हम लौट रहे हैं null।

const App = ({ number }) => {
  if(number%2) {
    return (
      <div>
        Number: {number}
      </div>
    )
  }
  
  return (null);           //===> notice here, returning null for even values
}

const data = [1,2,3,4,5,6];

ReactDOM.render(
  <div>
    {data.map(el => <App key={el} number={el} />)}
  </div>,
  document.getElementById('app')
)

<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='app' />

Comments

आप (अशक्त) क्यों लौट रहे हैं और केवल अशक्त नहीं हैं?

— wederer

@wederer के बीच कोई अंतर नहीं है return nullऔर return (null)वे समान हैं :)

— मयंक शुक्ला

लेकिन जिस तरह से, आप अपने फ़ंक्शन से बाहर नहीं निकल सकते (जो अपरिभाषित की तरह ही है)। यदि आपके पास कोई नहीं है returnतो प्रतिक्रिया एक त्रुटि देती है। तो return nullआवश्यकता है।

— जॉन हेन्केल

Answer 2

कुछ उत्तर थोड़े गलत हैं और डॉक्स के गलत भाग की ओर संकेत करते हैं:

यदि आप एक घटक को रेंडर करने के लिए कुछ भी नहीं चाहते हैं, तो बस null, डॉक्टर के अनुसार :

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

यदि आप undefinedउदाहरण के लिए लौटने की कोशिश करते हैं , तो आपको निम्न त्रुटि मिलेगी:

रेंडर से कुछ भी नहीं लौटाया गया। इसका मतलब आमतौर पर रिटर्न स्टेटमेंट गायब होता है। या, कुछ भी नहीं सौंपने के लिए, अशक्त वापसी।

के रूप में अन्य उत्तर से कहा, null, true, falseऔर undefinedवैध बच्चों जो सशर्त प्रतिपादन के लिए उपयोगी है कर रहे हैं अंदर / कुछ भी नहीं प्रस्तुत करना, बस वापस लौटकर अपना jsx, लेकिन यह आपको छिपाने के लिए अपने घटक चाहते हैं null।

Answer 3

हाँ, आप एक रेकट रेंडर विधि से एक खाली मान वापस कर सकते हैं।

आप निम्न में से कोई भी लौटा सकते हैं: false, null, undefined, or true

डॉक्स के अनुसार :

false, null, undefined, और trueवैध बच्चे हैं। वे बस प्रस्तुत नहीं करते हैं।

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

return null; or
return false; or
return true; or
return undefined; 

हालाँकि return nullयह सबसे पसंदीदा है क्योंकि यह दर्शाता है कि कुछ भी नहीं लौटाया गया है

Comments

अनिर्धारित वापसी गलत है। यह त्रुटि लौटाएगा। इसके बजाय <div> {अपरिभाषित} </ div> सही तरीका है।

— जय धवन

Answer 4

थोड़ा ऑफ-टॉपिक लेकिन अगर आपको कभी ऐसे क्लास-आधारित कंपोनेंट की जरूरत पड़े जो कभी किसी चीज को प्रस्तुत न करे और आप कुछ अभी तक मानकीकृत ES सिंटैक्स का उपयोग करके खुश हों, तो आप जाना चाह सकते हैं:

render = () => null

यह मूल रूप से एक तीर विधि है जिसे वर्तमान में ट्रांसफ़ॉर्म-क्लास-प्रॉपर्टीज़ बैबल प्लगइन की आवश्यकता है। प्रतिक्रिया आपको renderफ़ंक्शन के बिना एक घटक को परिभाषित नहीं करने देगी और यह इस आवश्यकता को पूरा करने वाला सबसे संक्षिप्त रूप है जिसके बारे में मैं सोच सकता हूं।

मैं फ़िलहाल इस ट्रिक को प्रलेखन से उधार लिए गए स्क्रॉलटॉप के एक प्रकार में उपयोग कर रहा हूँ react-router। मेरे मामले में, घटक का केवल एक ही उदाहरण है और यह कुछ भी प्रस्तुत नहीं करता है, इसलिए "रेंडर नल" का एक छोटा रूप वहां अच्छा लगता है।

Comments

कोड पहले ही समाप्त हो चुका है, लेकिन मुझे यह शैली पसंद है, सबसे सरल कोड दिखता है।

— शिन

Answer 5

हम इस तरह वापस आ सकते हैं,

return <React.Fragment />;

Comments

क्या यह वापसी से बेहतर या बुरा है null?

— स्ट्राइकर

अशक्त के बजाय Fragment का उपयोग कर @bitstrider स्मृति को खोने के लिए ट्रिगर करता है।

— कू

यह सुनिश्चित नहीं है कि यह उत्तर क्यों दिया गया है, यह डेवलपर के इरादे को स्पष्ट रूप से

— दर्शाता है

Answer 6

रेंडर () फ़ंक्शन में फ़ॉल्सी मान लौटाने से कुछ नहीं होगा। तो आप बस कर सकते हैं

 render() {
    let finalClasses = "" + (this.state.classes || "");
    return !isTimeout && <div>{this.props.children}</div>;
  }