Conditional Rendering
នៅក្នុង React អ្នកអាចបង្កើត components ខុសៗគ្នាដែល encapsulate ឥរិយាបទ (behavior) ដែលអ្នកត្រូវការ។ បន្ទាប់មកទៀតអ្នកអាច render ពួកវាមួយចំនួនប៉ុណ្ណោះ ដោយអាស្រ័យលើ state នៃ application របស់អ្នក។
Conditional rendering នៅក្នុង React ធ្វើការដូចគ្នា និង conditions នៅក្នុង JavaScript។ ប្រើ JavaScript operators ដូចជា if
ឬក៏ conditional operator ដើម្បីបង្កើត elements ដែលតំណាងអោយ current state ហើយអនុញ្ញាតឱ្យ React ធ្វើបច្ចុប្បន្នភាព UI ដែលត្រូវនិង conditions។
ពិចារណា components ទាំងពីរនេះ៖
function UserGreeting(props) {
return <h1>Welcome back!</h1>;
}
function GuestGreeting(props) {
return <h1>Please sign up.</h1>;
}
យើងនឹងបង្កើត Greeting
component ដែលបង្ហាញ (displays) components ទាំងនេះដោយអាស្រ័យលើថាអ្នកប្រើប្រាស់បាន logged in ឬក៏អត់៖
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) { return <UserGreeting />; } return <GuestGreeting />;}
ReactDOM.render(
// Try changing to isLoggedIn={true}:
<Greeting isLoggedIn={false} />, document.getElementById('root'));
ឧទាហរណ៍នេះ renders greeting ខុសគ្នាដោយអាស្រ័យលើតម្លៃនៃ isLoggedIn
prop។
Element Variables
អ្នកអាចប្រើ variables ដើម្បីរក្សាទុក elements។ នេះអាចជួយអ្នកក្នុងការដាក់លក្ខខណ្ឌ render ផ្នែកមួយនៃ component ខណៈពេលដែលលទ្ធផល (output) មិនផ្លាស់ប្តូរទេ។
សូមពិចារណាពី components ពីរនេះដែលតំណាងអោយ Logout និង Login ប៊ូតុង៖
function LoginButton(props) {
return (
<button onClick={props.onClick}>
Login
</button>
);
}
function LogoutButton(props) {
return (
<button onClick={props.onClick}>
Logout
</button>
);
}
នៅក្នុងឧទាហរណ៍ខាងក្រោម យើងនឹងបង្កើត stateful component មួយដែលត្រូវបានហៅថា LoginControl
។
វានឹង render ទាំង <LoginButton />
ឬក៏ <LogoutButton />
ដោយអាស្រ័យលើ current state របស់វា។ វានឹង render <Greeting />
ផងដែរ ដែលតពីឧទាហរណ៍មុន៖
class LoginControl extends React.Component {
constructor(props) {
super(props);
this.handleLoginClick = this.handleLoginClick.bind(this);
this.handleLogoutClick = this.handleLogoutClick.bind(this);
this.state = {isLoggedIn: false};
}
handleLoginClick() {
this.setState({isLoggedIn: true});
}
handleLogoutClick() {
this.setState({isLoggedIn: false});
}
render() {
const isLoggedIn = this.state.isLoggedIn;
let button;
if (isLoggedIn) { button = <LogoutButton onClick={this.handleLogoutClick} />; } else { button = <LoginButton onClick={this.handleLoginClick} />; }
return (
<div>
<Greeting isLoggedIn={isLoggedIn} /> {button} </div>
);
}
}
ReactDOM.render(
<LoginControl />,
document.getElementById('root')
);
ខណៈពេលកំពុងប្រកាស variable មួយ ការប្រើ if
statement គឺជាវិធីដ៏ល្អដើម្បីដាក់លក្ខខណ្ឌក្នុងការ render component មួយ
ហើយពេលខ្លះអ្នកប្រហែលជាចង់ប្រើ syntax ដែលសរសេរខ្លីជាងនេះ។ មានវិធីមួយចំនួនក្នុងការដាក់លក្ខខណ្ឌលក្ខណះ inline (inline conditions) ក្នុង JSX ហើយត្រូវបានពន្យល់ដូចខាងក្រោម។
Inline If ជាមួយ Logical && Operator
អ្នកប្រហែល បង្កប់ (embed) expressions មួយចំនួននៅក្នុង JSX ដោយការដាក់រុំពួកវានៅក្នុងដង្កៀបអង្កាញ់ (curly braces)។ នេះរួមបញ្ចូលទាំង JavaScript logical &&
operator។ វាអាចងាយស្រួលសម្រាប់ការដាក់លក្ខខណ្ឌរួមជាមួយ element មួយ៖
function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (
<div>
<h1>Hello!</h1>
{unreadMessages.length > 0 && <h2> You have {unreadMessages.length} unread messages. </h2> } </div>
);
}
const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
<Mailbox unreadMessages={messages} />,
document.getElementById('root')
);
វាដំណើរការដោយសារតែ JavaScript true & expression
តែងតែវាយតម្លៃទៅជា expression
និង false && expression
តែងតែវាយតម្លៃទៅជា false
។
ដូច្នេះប្រសិនបើលក្ខខណ្ឌគឺ true
នេាះ element នៅខាងស្តាំបន្ទាប់ពី &&
នឹងបង្ហាញនៅក្នុងលទ្ធផល (output)។ ប្រសិនបើវាគឺ false
នេាះ React នឹងមិនអើពើ (ignore) ហើយរំលងវា។
Inline If-Else ជាមួយ Conditional Operator
Method ផ្សេងទៀតសម្រាប់ដាក់លក្ខខណ្ឌក្នុងការ render elements ជាលក្ខណះ inline គឺប្រើ JavaScript conditional operator condition ? true : false
។
នៅក្នុងឧទាហរណ៍ខាងក្រោម យើងប្រើវាដើម្បីដាក់លក្ខខណ្ឌក្នុងការ render នូវ small block មួយរបស់ text។
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in. </div>
);
}
វាក៏អាចត្រូវបានប្រើសម្រាប់ expressions ធំជាងនេះ បើទោះបីជាវាមិនសូវច្បាស់ពីអ្វីដែលនឹងកើតឡើង៖
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
{isLoggedIn ? <LogoutButton onClick={this.handleLogoutClick} />
: <LoginButton onClick={this.handleLoginClick} /> }
</div> );
}
ដូចនៅក្នុង JavaScrip វាអាស្រ័យទៅលើអ្នកក្នុងការជ្រើសរើស style ដែលសមរម្យមួយដោយផ្អែកលើអ្វីដែលអ្នកនិងក្រុមរបស់អ្នកពិចារណាថាកូដគឺ more readable។ ចងចាំផងដែរថានៅពេលណាដែលលក្ខខណ្ឌប្រែជាស្មុគស្មាញ វាអាចជាពេលវេលាដ៏ល្អមួយដើម្បី extract a component។
បង្ការ Component ពីការ Render
ក្នុងករណីកម្រអ្នកប្រហែលជាចង់អោយ component មួយ លាក់ខ្លួនវា (hide itself) ទោះបីជាវាត្រូវបាន render ដោយ component ផ្សេង។ ដើម្បីធ្វើដូចនេះអ្នកត្រូវ return null
ជំនួសអោយលទ្ធផល (output) render របស់វា។
នៅក្នុងឧទាហរណ៍ខាងក្រោម <WarningBanner />
ត្រូវបាន render ដោយអាស្រ័យលើតម្លៃរបស់ props ដែលត្រូវបានហៅថា warn
។ ប្រសិនបើតម្លៃរបស់ props គឺ false
អញ្ជឹង component នឹងមិន render។
function WarningBanner(props) {
if (!props.warn) { return null; }
return (
<div className="warning">
Warning!
</div>
);
}
class Page extends React.Component {
constructor(props) {
super(props);
this.state = {showWarning: true};
this.handleToggleClick = this.handleToggleClick.bind(this);
}
handleToggleClick() {
this.setState(state => ({
showWarning: !state.showWarning
}));
}
render() {
return (
<div>
<WarningBanner warn={this.state.showWarning} /> <button onClick={this.handleToggleClick}>
{this.state.showWarning ? 'Hide' : 'Show'}
</button>
</div>
);
}
}
ReactDOM.render(
<Page />,
document.getElementById('root')
);
ការ return null
ពី render
method របស់ component មួយមិនប៉ះពាល់ដល់ការ firing នៃ lifecycle methods របស់ component ទេ។ ឧទាហរណ៍ componentDidUpdate
នឹងនៅតែត្រូវបាន call។