Conditional Rendering
React තුලදි ඔබට අවශ්ය වෙනස් behaviors සදහා වෙන වෙනම components සදා ගත හෑක. ඉන්පසු state එක මත එවායින් සමහරක් පමනක් render කරගත හෑක.
React තුලදි Conditional rendering වැඩ කරන්නේ javascript තුල සමාන්ය conditions වැඩකරන ආකරයටමය. if
සහ conditional operator භාවිතා කර අපට අවශ්ය UI Components පමනක් පෙනෙන පරිදි state එකෙ values update කල හැකියි
පහත උදාහරන 2 බලන්න:
function UserGreeting(props) {
return <h1>Welcome back!</h1>;
}
function GuestGreeting(props) {
return <h1>Please sign up.</h1>;
}
දැන් අපි Greeting
component එක create කර user log ඌවාද නැතිද condition එක මත ඉහත components 2න් එකක් display කරයි
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'));
මෙහිදී isLoggedIn
value එක මත වෙනස් component එකක් render වෙයි
Element Variables
ඔබට variable එකක අදාල elements තබා ගෙන component එකකින් කොටසක් පමනක් render කල හැක.
පහත Logout සහ Login buttons බලන්න:
function LoginButton(props) {
return (
<button onClick={props.onClick}>
Login
</button>
);
}
function LogoutButton(props) {
return (
<button onClick={props.onClick}>
Logout
</button>
);
}
මෙම උදාහරනයේදි අපි LoginControl
නම් stateful component එක සදාගන්නවා
එය වර්තමාන state එක මත <LoginButton />
හෝ <LogoutButton />
ද, පෙර උදහරනයෙන් <Greeting />
component එකද render කරයි
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 එකක් declare කර සහ if එකක් භාවිතා කිරීම conditionally render කිරීම සඳහා කදිම ක්රමයකි, සමහර විට ඔබට කෙටි syntax එකක් භාවිතා කිරීමට අවශ්ය විය හැකිය. JSX හි inline conditions ලිවීම දැක්වෙන කරුණු පැහැදිලි කිරීම සඳහා ක්රම කිහිපයක් පහත ඇත.
Inline If with Logical && Operator
ඔබ සඟල වරහන් මගින් JSX හි ඕනෑම expression එකක් යෙදිය හැක. මේ සදහා javascript logical &&
operator එක භාවිතා වේ. මූලද්රව්යයක් ඇතුළු conditionally පාවිච්චි කිරිමට එය ප්රයෝජනවත් විය හැකිය.
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
වලින් නවතී
එබැවින් කොන්දේසිය සත්යය නම්, ’&&’ පසුව ඇති element එක output එක තුල දිස්වනු ඇත. එය අසත්ය නම්, React විසින් නොසලකා හරිනු ඇත.
Inline If-Else with Conditional Operator
කොන්දේසි සහිතව අංගයන් render කිරීම සඳහා තවත් ක්රමයක් වන්නේ JavaScript conditional operator භාවිතා කිරීමයි condition ? true : false
.
පහත දැක්වෙන උදාහරණයේදී, අපි කුඩා text block එකක් කොන්දේසිගත ලෙස යොදා ගනිමු.
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> );
}
JavaScript හි ඇති ආකාරයට, ඔබ වඩාත් හොඳින් කියවා ඇති පරිදි ඔබ සහ ඔබේ කණ්ඩායම පිළිබඳව ඔබ විසින් සහ ඔබේ කණ්ඩායම මත පදනම් වූ සුදුසු code style එකක් තෝරා ගැනීමට ඔබට තීරණය වේ. conditions සංකීර්ණ වූ විට එය extract a component භාවිතා කිරීමට හොඳ කාලයක් විය හැකිය.
Preventing Component from Rendering
කලාතුරකින් component එකක් තවත් component එකකින් render වුවද එය සැඟවීමට අවශ්ය විය හැකිය. මෙම ආපසු පැමිණීම වෙනුවට එහි ප්රතිදානය වෙනුවට.මේ සදහා රෙන්ඩෙර් ඔඋට්පුට් එක වෙනුවට null
return කරන්න.
පහත දැක්වෙන උදාහරණයේ, WarningBanner
යනු warn prop එකේ අගය මත පදනම්ව render වන එකකි.එහි අගය false නම් WarningBanner
එකක 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')
);
null
return කල පසු component එකෙහි render මෙතොඩ් එකට react lifecycle methods වලින් බලපෑමක් නැත.නමුත් componentDidUpdate
ක්රියා කරනු ඇත