در ری اکت، شما می‌توانید کامپوننت‌های مجزایی بسازید که رفتار مورد نیاز شما را کپسوله سازی کنند. سپس می‌توانید فقط بعضی از این کامپوننت‌ها را بسته به state برنامه رندر کنید .
\nرندر کردن شرطی در ری‌اکت همان‌طور کار می‌کند که شرط‌ها در جاوااسکریپت کار می‌کنند. از عملگرهای جاوااسکریپت مانند if یا عملگر شرطی (conditional operator) برای ساختن المنت‌هایی که نمایانگر state کنونی هستند، استفاده کنید و بگذارید ری‌اکت UI را به‌روز رسانی کند تا با آن‌ها منطبق شود.
\nاین دو کامپوننت را در نظر بگیرید:
\nfunction UserGreeting(props) {\n return <h1>Welcome back!</h1>;\n}\n\nfunction GuestGreeting(props) {\n return <h1>Please sign up.</h1>;\n} در ادامه ما یک کامپوننت Greeting می‌سازیم که یکی از این کامپوننت‌ها را بسته به اینکه کاربر لاگین شده‌است نشان می‌هد:
function Greeting(props) {\n const isLoggedIn = props.isLoggedIn;\n if (isLoggedIn) { return <UserGreeting />; } return <GuestGreeting />;}\nReactDOM.render(\n // تغییر isLoggedIn={true} را امتحان کنید \n <Greeting isLoggedIn={false} />, document.getElementById('root'));این مثال بر اساس مقدار prop با نام isLoggedIn یک [پیام] خوش‌آمد گویی متفاوتی را رندر می‌کند.
شما می‌توانید از متغییرها برای ذخیره کردن المنت‌ها استفاده کنید. این به شما کمک می‌کند تا بتوانید بخشی از یک کامپوننت را به‌صورت شرطی، رندر کرده، درحالی‌که بقیه خروجی کامپوننت تغییری نمی‌کند.
\nاین دو کامپوننت جدید را در نظر بگیرید که نمایانگر دکمه‌های ورود (Login) و خروج (Logout) هستند.
\nfunction LoginButton(props) {\n return (\n <button onClick={props.onClick}>\n Login\n </button>\n );\n}\n\nfunction LogoutButton(props) {\n return (\n <button onClick={props.onClick}>\n Logout\n </button>\n );\n}در مثال زیر، یک کامپوننت دارای state به نام LoginControl می‌سازیم.
این [کامپوننت] یا <LoginButton /> یا <LogoutButton /> را براساس state کنونی رندر خواهد کرد. همچنین، یک <Greeting /> از مثال را قبل رندر می‌کند:
class LoginControl extends React.Component {\n constructor(props) {\n super(props);\n this.handleLoginClick = this.handleLoginClick.bind(this);\n this.handleLogoutClick = this.handleLogoutClick.bind(this);\n this.state = {isLoggedIn: false};\n }\n\n handleLoginClick() {\n this.setState({isLoggedIn: true});\n }\n\n handleLogoutClick() {\n this.setState({isLoggedIn: false});\n }\n\n render() {\n const isLoggedIn = this.state.isLoggedIn;\n let button;\n if (isLoggedIn) { button = <LogoutButton onClick={this.handleLogoutClick} />; } else { button = <LoginButton onClick={this.handleLoginClick} />; }\n return (\n <div>\n <Greeting isLoggedIn={isLoggedIn} /> {button} </div>\n );\n }\n}\n\nReactDOM.render(\n <LoginControl />,\n document.getElementById('root')\n);درحالی‌که تعریف یک متغیر و استفاده از عبارت شرطی if، یک روش خوب برای رندرکردن شرطی است؛ گاهی ممکن است شما بخواهید یک syntax کوتاه‌تر داشته باشید. چندین روش برای شرط های خطی در JSX وجود دارد که در زیر توضیح داده شده است:
شما می‌توانید هر expression را در JSX به صورت توکار با قراردادن در آکولاد بنویسید. این مورد شامل عملگر منطقی && هم می‌شود. کاربرد آن برای اضافه‌کردن شرطی یک المنت است:
function Mailbox(props) {\n const unreadMessages = props.unreadMessages;\n return (\n <div>\n <h1>Hello!</h1>\n {unreadMessages.length > 0 && <h2> You have {unreadMessages.length} unread messages. </h2> } </div>\n );\n}\n\nconst messages = ['React', 'Re: React', 'Re:Re: React'];\nReactDOM.render(\n <Mailbox unreadMessages={messages} />,\n document.getElementById('root')\n);این روش جواب می‌دهد چرا که در جاوااسکریپت، حاصل true && expression همیشه برابر است با expression و همچنین حاصل false && expression همیشه برابر است با false.
بنابراین اگر شرط برابر با true باشد، المنتی که بلافاصله بعد از عملگر && قرار گرفته است در خروجی نمایش داده خواهد شد و اگر حاصل شرط برابر باfalse باشد، ری‌اکت این عبارت را نادیده می‌گیرد.
توجه داشته باشید بازگرداندن یک عبارت falsy مانع رندر شدن المنت بعد از && می‌شود، اما مقدار عبارت falsy را باز می‌گرداند. در مثال زیر، <div>0</div> از متد render باز گردانده می‌شود.
render() {\n const count = 0; return (\n <div>\n { count && <h1>Messages: {count}</h1>} </div>\n );\n}روش دیگر رندر شرطی المنت‌ها به‌صورت خطی، استفاده از عملگر شرطی جاوااسکریپت condition ? true : false است.
در مثال زیر ما از این روش استفاده می‌کنیم تا متن کوتاهی را به‌صورت شرطی رندر کنیم.
\nrender() {\n const isLoggedIn = this.state.isLoggedIn;\n return (\n <div>\n The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in. </div>\n );\n}از این روش همچنین می‌توان برای عبارات شرطی طولانی‌تر استفاده نمود، اگرچه که در اینصورت کمتر مشخص است که [در کد نوشته شده] چه اتفاقی افتاده است:
\nrender() {\n const isLoggedIn = this.state.isLoggedIn;\n return (\n <div>\n {isLoggedIn ? <LogoutButton onClick={this.handleLogoutClick} />\n : <LoginButton onClick={this.handleLoginClick} /> }\n </div> );\n}درست مثل جاوااسکریپت، انتخاب اینکه کدام روش مناسب است، به نظر شما و تیم شما بستگی دارد که کدام روش برای شما خوانا‌تر است. همچنین به یاد داشته باشید که هرگاه شرط‌ها بیش از اندازه پیچیده شدند،ممکن است زمان خوبی باشه که یک کامپوننت استخراج کنید.
\nدر موارد نادر، ممکن است شما بخواهید یک کامپوننت - حتی اگر توسط یک کامپوننت دیگر رندر شده باشد - خودش را مخفی کند. برای انجام این کار، null را به‌جای خروجی رندر برگردانید.
در مثال زیر، کامپوننت <WarningBanner /> براساس مقدار prop ای به‌نام warn رندر می‌شود. اگر مقدار این prop برابر باfalse باشد، در اینصورت این کامپوننت رندر نمی‌شود.
function WarningBanner(props) {\n if (!props.warn) { return null; }\n return (\n <div className=\"warning\">\n Warning!\n </div>\n );\n}\n\nclass Page extends React.Component {\n constructor(props) {\n super(props);\n this.state = {showWarning: true};\n this.handleToggleClick = this.handleToggleClick.bind(this);\n }\n\n handleToggleClick() {\n this.setState(state => ({\n showWarning: !state.showWarning\n }));\n }\n\n render() {\n return (\n <div>\n <WarningBanner warn={this.state.showWarning} /> <button onClick={this.handleToggleClick}>\n {this.state.showWarning ? 'Hide' : 'Show'}\n </button>\n </div>\n );\n }\n}\n\nReactDOM.render(\n <Page />,\n document.getElementById('root')\n);برگرداندن مقدار null از متد render یک کامپوننت، اجرای متد‌های چرخه حیاط کامپوننت را تحت تاثیر قرار نمی‌دهد. برای مثال componentDidUpdate همچنان فراخوانی خواهد شد.