क्या इसका उपयोग करना संभव है यदि ... और ... प्रतिक्रिया में प्रतिक्रिया प्रस्तुत करें?

Question

मूल रूप से, मैं एक घटक प्रतिक्रिया है, इसकी render() समारोह शरीर के रूप में नीचे है:

render(){ 
    return (
     <div> 
      <Element1/> 
      <Element2/> 
      // note: code does not work here 
      if (this.props.hasImage) <MyImage /> 
      else <OtherElement/> 
     </div> 
    ) 
} 

Answer 1

वास्तव में उस तरह नहीं है, लेकिन वहाँ कामकाज से जुड़े हैं। React's docs में सशर्त प्रतिपादन के बारे में एक अनुभाग है जिसे आपको देखना चाहिए। यहां एक उदाहरण दिया गया है कि यदि आप इनलाइन का उपयोग कर क्या कर सकते हैं।

render() { 
    const isLoggedIn = this.state.isLoggedIn; 
    return (
    <div> 
     {isLoggedIn ? (
     <LogoutButton onClick={this.handleLogoutClick} /> 
    ) : (
     <LoginButton onClick={this.handleLoginClick} /> 
    )} 
    </div> 
); 
} 

आप इसे रेंडर फ़ंक्शन के अंदर भी सौदा कर सकते हैं, लेकिन जेएसएक्स लौटने से पहले।

if (isLoggedIn) { 
    button = <LogoutButton onClick={this.handleLogoutClick} />; 
} else { 
    button = <LoginButton onClick={this.handleLoginClick} />; 
} 

return (
    <div> 
    <Greeting isLoggedIn={isLoggedIn} /> 
    {button} 
    </div> 
); 

यह भी उल्लेखनीय है कि ज़ेकेड्रॉइड ने टिप्पणियों में क्या लाया। यदि आप केवल एक शर्त की जांच कर रहे हैं और कोड का एक विशेष टुकड़ा प्रस्तुत नहीं करना चाहते हैं जो अनुपालन नहीं करता है, तो आप && operator का उपयोग कर सकते हैं।

return (
    <div> 
     <h1>Hello!</h1> 
     {unreadMessages.length > 0 && 
     <h2> 
      You have {unreadMessages.length} unread messages. 
     </h2> 
     } 
    </div> 
); 

Answer 2

एक अगर किसी और संरचना के लिए आशुलिपि की उम्मीद काम करता है के रूप में (यह मेरा आदर्श है, जो कि वर्तमान में यह मतलब है काम नहीं करता है) JSX

में

this.props.hasImage ? <MyImage /> : <SomeotherElement>

आप DevNacho के इस ब्लॉग पोस्ट के अन्य विकल्पों को पा सकते हैं, लेकिन यह आशुलिपि के साथ यह करने के लिए और अधिक आम है।

this.setState({overlayHovered: true}); 

renderComponentByState({overlayHovered}){ 
    if(overlayHovered) { 
     return <overlayHoveredComponent /> 
    }else{ 
     return <overlayNotHoveredComponent /> 
    } 
} 

आप this.state से अपने overlayHovered destructure कर सकते हैं: आप अगर खंड आप एक समारोह है कि रिटर्न या घटक एक या घटक बी

उदाहरण के लिए

लिखना चाहिए एक बड़ा करने के लिए की जरूरत है यदि आप इसे पैरामीटर के रूप में देते हैं। फिर अपने प्रस्तुत करना() विधि में है कि समारोह निष्पादित करें:

renderComponentByState(this.state)

Answer 3

मई मैं बहुत देर हो चुकी हूं। लेकिन मुझे उम्मीद है कि यह किसी की मदद करेगा। पहले उन दो तत्वों को अलग करें।

renderLogout(){ 
<div> 
    <LogoutButton onClick={this.handleLogoutClick} /> 
<div> 
} 

renderLogin(){ 
<div> 
    <LoginButton onClick={this.handleLoginClick} /> 
<div> 
} 

फिर आप इन कार्यों को अन्य कथन का उपयोग करके फ़ंक्शन प्रस्तुत करने से कॉल कर सकते हैं।

render(){ 
if(this.state.result){ 
    return this.renderResult(); 
}else{ 
    return this.renderQuiz(); 
}} 

यह मेरे लिए काम करता है। :)