चेक अगर तत्व प्रतिक्रिया खाली है

Question

मैं शीर्षक रेंडर करने के लिए जब वर्णन

var description = <MyElement />; // render will return nothing in render in some cases 

if (!description) { // this will not work because its an object (reactelement) 
    return null; 
} 

<div> 
    {title} 
    {description} 
</div> 

क्या करता है, तो अपने खाली सही तरीके के बजाय! वर्णन की जांच करने के लिए रिक्त है नहीं करना चाहते?

Answer 1

var description, title; 

if (this.props.description) { 
    description = <Description description={this.props.description} />; 

    if (this.props.title) { 
     title = <Title title={this.props.title} />; 
    } 
} 

<div> 
    {title} 
    {description} 
</div> 

या बस:

render() { 
    const { description, title } = this.props; 

    return (
    <div> 
     {title && description && <Title title={title} />} 
     {description && <Description description={description} />;} 
    </div> 
); 
} 

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