मूल रूप से, मेरे पास एक प्रतिक्रिया घटक है, इसका render()फ़ंक्शन बॉडी नीचे है: (यह मेरा आदर्श है, जिसका अर्थ है कि यह वर्तमान में काम नहीं करता है)
render(){
return (
<div>
<Element1/>
<Element2/>
// note: code does not work here
if (this.props.hasImage) <MyImage />
else <OtherElement/>
</div>
)
}
जवाबों:
बिल्कुल वैसा नहीं, बल्कि वर्कअराउंड हैं। कंडीशनल रेंडरिंग के बारे में रिएक्ट के डॉक्स में एक सेक्शन है जिसे आपको देखना चाहिए। यहाँ एक उदाहरण है कि क्या आप इनलाइन का उपयोग कर सकते हैं अगर-और।
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
{isLoggedIn ? (
<LogoutButton onClick={this.handleLogoutClick} />
) : (
<LoginButton onClick={this.handleLoginClick} />
)}
</div>
);
}
आप रेंडर फ़ंक्शन के अंदर भी इससे निपट सकते हैं, लेकिन jsx को वापस करने से पहले।
if (isLoggedIn) {
button = <LogoutButton onClick={this.handleLogoutClick} />;
} else {
button = <LoginButton onClick={this.handleLoginClick} />;
}
return (
<div>
<Greeting isLoggedIn={isLoggedIn} />
{button}
</div>
);
यह भी उल्लेखनीय है कि ZekeDroid ने क्या टिप्पणी की। यदि आप सिर्फ एक शर्त के लिए जाँच कर रहे हैं और किसी विशेष कोड को प्रस्तुत नहीं करना चाहते हैं जो अनुपालन नहीं करता है, तो आप इसका उपयोग कर सकते हैं && operator।
return (
<div>
<h1>Hello!</h1>
{unreadMessages.length > 0 &&
<h2>
You have {unreadMessages.length} unread messages.
</h2>
}
</div>
);
isTrue ? <div>Something</div> : nullआप कर सकते हैंisTrue && <div>Something</div>
वास्तव में ऐसा करने का एक तरीका है जो ओपी पूछ रहा है। बस अनाम फ़ंक्शन को प्रस्तुत करें और कॉल करें जैसे:
render () {
return (
<div>
{(() => {
if (someCase) {
return (
<div>someCase</div>
)
} else if (otherCase) {
return (
<div>otherCase</div>
)
} else {
return (
<div>catch all</div>
)
}
})()}
</div>
)
}
आप का उपयोग कर कुछ भी प्रदान कर सकते हैं conditionalकी तरह बयान if, else:
render() {
const price = this.state.price;
let comp;
if (price) {
comp = <h1>Block for getting started with {this.state.price}</h1>
} else {
comp = <h1>Block for getting started.</h1>
}
return (
<div>
<div className="gettingStart">
{comp}
</div>
</div>
);
}
आपको TERNARY ऑपरेटर के बारे में याद रखना चाहिए
:
तो आपका कोड इस तरह होगा,
render(){
return (
<div>
<Element1/>
<Element2/>
// note: code does not work here
{
this.props.hasImage ? // if has image
<MyImage /> // return My image tag
:
<OtherElement/> // otherwise return other element
}
</div>
)
}
यदि आप तत्वों को दिखाने के लिए कोई शर्त चाहते हैं, तो आप कुछ इस तरह का उपयोग कर सकते हैं।
renderButton() {
if (this.state.loading) {
return <Spinner size="small" spinnerStyle={styles.spinnerStyle} />;
}
return (
<Button onPress={this.onButtonPress.bind(this)}>
Log In
</Button>
);
}
फिर फंक्शन रेंडर के अंदर हेल्प मेथड को कॉल करें।
<View style={styles.buttonStyle}>
{this.renderButton()}
</View>
या आप वापसी के अंदर हालत के दूसरे तरीके का उपयोग कर सकते हैं
{this.props.hasImage ? <element1> : <element2>}
टाइप 1: If स्टेटमेंट स्टाइल
{props.hasImage &&
<MyImage />
}
टाइप 2: If else स्टेटमेंट स्टाइल
{props.hasImage ?
<MyImage /> :
<OtherElement/>
}
JSX में अपेक्षित रूप से कार्य करने के लिए शॉर्टहैंड की संरचना काम करती है
this.props.hasImage ? <MyImage /> : <SomeotherElement>
आप DevNacho के इस ब्लॉगपोस्ट पर अन्य विकल्प पा सकते हैं , लेकिन इसे आशुलिपि के साथ करना अधिक आम है। यदि क्लॉज़ के लिए आपको बड़ा होना चाहिए तो आपको एक फ़ंक्शन लिखना चाहिए जो रिटर्न या घटक ए या घटक बी।
उदाहरण के लिए:
this.setState({overlayHovered: true});
renderComponentByState({overlayHovered}){
if(overlayHovered) {
return <overlayHoveredComponent />
}else{
return <overlayNotHoveredComponent />
}
}
यदि आप इसे पैरामीटर के रूप में देते हैं तो आप इससे ओवरलेवर को नष्ट कर सकते हैं। फिर उस फ़ंक्शन को अपने रेंडर () विधि में निष्पादित करें:
renderComponentByState(this.state)
यदि आपको एक से अधिक शर्त की आवश्यकता है, तो आप इसे आज़मा सकते हैं
https://www.npmjs.com/package/react-if-elseif-else-render
import { If, Then, ElseIf, Else } from 'react-if-elseif-else-render';
class Example extends Component {
render() {
var i = 3; // it will render '<p>Else</p>'
return (
<If condition={i == 1}>
<Then>
<p>Then: 1</p>
</Then>
<ElseIf condition={i == 2}>
<p>ElseIf: 2</p>
</ElseIf>
<Else>
<p>Else</p>
</Else>
</If>
);
}
}
हो सकता है मैं यहाँ बहुत देर से पहुँचूँ। लेकिन मुझे उम्मीद है कि इससे किसी को मदद मिलेगी। सबसे पहले उन दो तत्वों को अलग करें।
renderLogout(){
<div>
<LogoutButton onClick={this.handleLogoutClick} />
<div>
}
renderLogin(){
<div>
<LoginButton onClick={this.handleLoginClick} />
<div>
}
फिर आप इन फ़ंक्शन को if स्टेटमेंट का उपयोग करके रेंडर फ़ंक्शन से कॉल कर सकते हैं।
render(){
if(this.state.result){
return this.renderResult();
}else{
return this.renderQuiz();
}}
यह मेरे लिए काम करता है। :)
मैंने टर्नरी ऑपरेटर का इस्तेमाल किया और यह मेरे लिए ठीक काम कर रहा है।
>
{item.lotNum == null ? ('PDF'):(item.lotNum)}
यदि आपके पास 2 अलग-अलग निर्भरता हैं, तो आप सशर्त ऑपरेटर के अंदर सशर्त (टर्नरी) ऑपरेटर का भी उपयोग कर सकते हैं।
{
(launch_success)
?
<span className="bg-green-100">
Success
</span>
:
(upcoming)
?
<span className="bg-teal-100">
Upcoming
</span>
:
<span className="bg-red-100">
Failed
</span>
}
स्विच केस या टर्नरी ऑपरेटर के साथ जाने की कोशिश करें
render(){
return (
<div>
<Element1/>
<Element2/>
// updated code works here
{(() => {
switch (this.props.hasImage) {
case (this.props.hasImage):
return <MyImage />;
default:
return (
<OtherElement/>;
);
}
})()}
</div>
)
}
इसने मेरे लिए काम किया और आपके लिए काम करना चाहिए। टर्नरी ऑपरेटर का प्रयास करें