Պայմանական արտապատկերում
React-ում դուք կարող եք ստեղծել միմյանցից զատ կոմպոնենտներ որոնք կինկապսուլացնեն ձեզ համար անհրաժեշտ պահվածքը, որից հետո կարող եք արտապատկերել նրանցից ոմանց` ելենելով հավելվածի վիճակից։
React-ում պայմանական արտապատկերումը աշխատում է այնպես, ինչպես պայմանները JavaScript-ում։
Օգտագործեք JavaScript-ի օպերատորներից if-ը
կամ պայմանական օպերատորը, որպեսզի ստեղծեք էլեմենտներ, որոնք կներկայացնեն ընթացիկ վիճակը և թույլ կտան React-ին թարմացնել UI-ը համապատասխանեցնելով իրենց։
Դիտարկեք այս երկու կոմպոնենտները.
function UserGreeting(props) {
return <h1>Բարի վերադարձ</h1>;
}
function GuestGreeting(props) {
return <h1>Խնդրում ենք մուտք գործել</h1>;
}
Մենք կստեղծենք Greeting
կոմպոնենտը, որը ցույց կտա այս կոմպոնենտներից միայն մեկը` կախված օգտագործողը մուտք է գործել համակարգ թե ոչ.
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) { return <UserGreeting />; } return <GuestGreeting />;}
ReactDOM.render(
// Փորձեք փոխել isLoggedIn={true}:
<Greeting isLoggedIn={false} />, document.getElementById('root'));
Այս օրինակը արտապատկերում է տարբեր Greeting
կոմպոնենտներ ելնելով` isLoggedIn
հատկության արժեքից։
Էլեմենտ փոփոխականներ
Դուք կարող եք օգտագործել փոփոխականներ` էլեմենտները պահելու համար։ Սա կարող է օգնել պայմանականորեն արտապատկերել կոմպոնենտի մեկ հատված մինչդեռ ելքային արժեքի մնացած մասը մնում է անփոփոխ։
Դիտարկեք այս այս երկու կոմպոնենտները, որոնք ներկայացնում են Մուտք և Ելք կոճակները.
function LoginButton(props) {
return (
<button onClick={props.onClick}>
Մուտք
</button>
);
}
function LogoutButton(props) {
return (
<button onClick={props.onClick}>
Ելք
</button>
);
}
Ստորև բերված օրինակում, մենք կստեղծենք LoginControl
անունով վիճակով կոմպոնենտ։
Այն կարտապատկերի <LoginButton />
կամ <LogoutButton />
ելնելով իր ներկա վիճակից։ Այն նաև կարտապատկերի <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')
);
Իհարկե փոփոխականներ հայտարարելը և if
օպերատորի օգնությամբ պայմանական արտապատկերումը բավականին լավ տարբերակ է, սակայն կան ավելի կարճ տարբերակներ, որոնք նշված են ստորև օրինակնեում։
Տրամաբանական && օպերատօրը if-ի փոխարեն
Դուք կարող եք ներդնել ցանկացած JSX արտահայտություն ձևավոր փակագծերի մեջ։ Այն ներառում է JavaScript-ի տրամաբանական &&
օպերատորը։ Այն կարող է լինել հարմար էլեմենտը պայմանկանորեն ավելացնելու համար։
function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (
<div>
<h1>Hello!</h1>
{unreadMessages.length > 0 && <h2> Դուք ունեք {unreadMessages.length} չկարդացված հաղորդագրություններ։ </h2> } </div>
);
}
const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
<Mailbox unreadMessages={messages} />,
document.getElementById('root')
);
Այն աշխատում է որովհետև JavaScript-ում, true && արտահայտություն
-ը միշտ արժեքավորվում է որպես արտահայտություն
, և false && արտահայտություն
-ը միշտ արժեքավորվում է որպես false
.
Հետևաբար, եթե արտահայտությունը true
է, նշանակում էլեմենտը &&
-ից անմիջապես հետո պետք է արտապատկերվի ելքային արժեքում։ Եթե այն false
է` React-ը կանտեսի և բաց կթողնի այն։
Պայմանական օպերատորը if-else-ի փոխարեն
Մեկ այլ միջոց, որը թույլ է տալիս պայմանականորեն արտապատկերել էլեմենտը, դա JavaScript-ի պայման ? true : false
օպերատորի օգտագործումն է։
Ստորև բերված օրինակում մենք օգտագործում ենք պայմանական օպերատորը փոքր տեքստային բլոկ արտապատկերելու համար.
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
Օգտագործողը մուտք <b>{isLoggedIn ? 'է' : 'չի'}</b> գործել. </div>
);
}
Այն կարող է օգտագործվել նաև մեծ արտահայտությունների դեպքում չնայած նրան որ այդքան էլ ակնհայտ չէ թե ինչ է կատարվում.
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
{isLoggedIn ? ( <LogoutButton onClick={this.handleLogoutClick} />
) : ( <LoginButton onClick={this.handleLoginClick} />
)} </div>
);
}
Ինչպես JavaScript-ում, դուք եք ընտրում համապատասխան գրելաոճը, հիմնվելով նրան, թե որն եք դուք և ձեր թիմը համարում ավելի ընթերնելի։ ԵՎ հիշեք որ եթե պայմանները ավելի են բարդանում, ապա դա շատ լավ ժամանակ է կոմպոնենտը բաժանել մասերի։
Կոմպոնենտի արտապատկերման կանխում
Միգուցե, հազվադեպ դեպքերում ցանկանաք, որ կոմպոնենտը թաքցնի ինքն իրեն, անգամ եթե այն արտապատկերվել է մեկ այլ կոմպոնենտի կողմից։ Այդ անելու համար ուղղակի վերադարձրեք null
որպես ելքային արժեք։
Ստորև բերված օրինակում <WarningBanner />
-ը արտապատկերվում է կախված warn
հատկության արժեքից։ Եթե նրա արժեքը false
է, ապա կոմպոնենտը չի արտապատկերվի։
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 ? 'Թաքցնել' : 'Ցույց տալ'}
</button>
</div>
);
}
}
ReactDOM.render(
<Page />,
document.getElementById('root')
);
Կոմպոնենտի render
մեթոդից null
վերադարձնելու դեպքում կոմպոնենտի կյանքի ցիկլի մեթոդները չեն կանչվելու։ Սակայն componentDidUpdate
-ը կշարունակի կանչվել։