条件付きレンダー
Reactにおける条件付きレンダーはJavaScriptにおける条件分岐と同じように動作します。
function UserGreeting(props) {
return <h1>Welcom back!</h1>;
}
function GuestGreeting(props) {
return <h1>Pleas sign up.</h1>;
}
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}
ReactDOM.render(
<Greeting isLoggedIn={false} />,
document.getElementById("root")
);
要素変数
要素を保持しておくために変数を使うことが出来ます。出力の他の部分を変えずにコンポーネントのいち部を条件付きでレンダーしたい場合に役立ちます。
class LoginControl extends React.Component {
constructor(props) {
super(props);
// handleLoginClick関数をコンポーネントインスタンスにバインドしている
this.handleLoginClick = this.handleLoginClick.bind(this);
this.handleLogoutClick = this.handleLogoutClick.bind(this);
this.state = { isLogedIn: 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 isLogedIn={isLogedIn} />
{button}
</div>
)
}
}
ReactDOM.render(
<LoginControl />,
document.getElementById("root")
);
インラインif
条件演算子 &&
, ?:
等を利用してインラインで条件分岐レンダーを出力出来ます。これは条件に応じて要素を含めたい場合に便利です。
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 message = ["React", "Re: React"];
ReactDOM.render(
<Mailbox unreadMessages={message} />
document.getElementById("root")
);
インラインIf-Else
render() {
const isLogedIn = this.state.isLogedIn;
return (
<div>
{isLogedIn ? (
<LogoutButton onClick={this.handleLogoutClick} />
) : (
<LoginButton onClick={this.handleLoginClick} />
)}
</div>
)
}
コンポーネントのレンダーを防ぐ
null
を返すことにより、レンダー出力をしないように制御できる。
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')
);