মূলত, আমার একটি প্রতিক্রিয়া উপাদান রয়েছে, এর 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>
);
}
আপনি রেন্ডার ফাংশনের ভিতরেও এটি মোকাবেলা করতে পারেন, তবে জেএসএক্স ফেরার আগে।
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>
);
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>}
অন্য কোনও কাঠামোর সংক্ষিপ্তকরণ জেএসএক্স-তে প্রত্যাশা অনুযায়ী কাজ করে
this.props.hasImage ? <MyImage /> : <SomeotherElement>
আপনি দেবনাচোর এই ব্লগপোস্টে অন্যান্য বিকল্পগুলি সন্ধান করতে পারেন তবে শর্টহ্যান্ডের সাথে এটি করা আরও সাধারণ। ক্লজটি যদি আপনার আরও বড় প্রয়োজন হয় তবে আপনাকে এমন একটি ফাংশন লিখতে হবে যা ফিরে আসে বা উপাদান A বা উপাদান বি।
উদাহরণ স্বরূপ:
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>
);
}
}
প্রকার 1: If বিবৃতি শৈলী
{props.hasImage &&
<MyImage />
}
প্রকার 2: If else বিবৃতি শৈলী
{props.hasImage ?
<MyImage /> :
<OtherElement/>
}
আমি এখানে অনেক দেরী হতে পারে। তবে আমি আশা করি এটি কারও সাহায্য করবে। প্রথমে সেই দুটি উপাদান আলাদা করুন।
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();
}}
এটি আমার পক্ষে কাজ করে। :)
আমি টার্নারি অপারেটর ব্যবহার করেছি এবং এটি আমার পক্ষে ভাল কাজ করছে।
>
{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>
)
}
এটি আমার পক্ষে কাজ করেছে এবং অন্য কারও পক্ষে কাজ করা উচিত। ব্যবহার করে দেখুন তিন অপারেটর