08. Conditional Rendering - accgetter/React GitHub Wiki
Reactでは、 振る舞いをカプセル化した一意のコンポーネントを作ることができます。
そして、それらのうちのいくつかだけを描画、アプリケーションの状態に依存させることができます。
条件つき描画はjavascriptと同じ方法で機能します。
エレメントを生成し現在の状態を表現するために、
javascriptの条件分岐を使ってください。
そして、Reactにそれらの状態をUIに反映させます。
次の2つのコンポーネントについて考察してみましょう:
function UserGreeting(props) {
return <h1>Welcome back!</h1>;
}
function GuestGreeting(props) {
return <h1>Please sign up.</h1>;
}
ユーザのログイン状態によって表示が変わるGreeting componentを作っていきます。
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 propの値に依存して異なる挨拶を表示します。
要素を格納するために変数を使うことができます。
これは残りの出力の表示が変わり切らない間も条件的にコンポーネントの一部を表示する手助けをしてくれます。
ログアウト、ログインボタンの二つの新しいコンポーネントについて考えてみましょう
function LoginButton(props) {
return (
<button onClick={props.onClick}>
Login
</button>
);
}
function LogoutButton(props) {
return (
<button onClick={props.onClick}>
Logout
</button>
);
}
この例の下で、LoginControlと呼ばれるstateful componentを作ります。
それは、ステートに依存し<LoginButton />
か どちらかを表示します。
また、一つ前の例を踏襲し、も表示します:
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 = null;
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ステーメントは、条件的にコンポーネントを表示するいい方法です。
たまに、短いシンタックスで実現したいときがあると思います。
幾つか、JSXのなかにコンディションをもつ方法があるので以下に説明致します。
色々な表現を{}に書くことでJSXの中に入れ込むことができます。
javascrptの&&演算子もです。
条件付きで要素を含めると便利です:
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 && の場合は常に表示、false &&の場合は、常にfalseです。
したがって、条件がtrueの場合、右側の要素は&&の後に評価され表示されます。
falseの場合は、Reactは無視します。
もう一つの方法は、インラインで三項演算子を使う方法です。
以下の例で小さなテキストのブロックを条件的に表示するためにその方法を使ってみましょう。
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
</div>
);
}
わかりづらいですが、より大きな表現にも使用できます
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
{isLoggedIn ? (
<LogoutButton onClick={this.handleLogoutClick} />
) : (
<LoginButton onClick={this.handleLoginClick} />
)}
</div>
);
}
JavaScriptのように、 もっと読みやすくするために
適切なスタイルをどのように選ぶかはあなた次第です。
また、条件は複雑になりやすいことを忘れないでください。
それはコンポーネントを引き抜く良いタイミングです。
まれに、他のコンポーネントに描画されたとはいえ、
表示したくないケースがあると思います。
そうするには描画する代わりにreturn nullします。
下記の例では、 がwarnと呼ばれるpropの値によって描画されます。
もし、その値が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(prevState => ({
showWarning: !prevState.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')
);
コンポーネントのrenderメドッドからnullを返しても
コンポーネントのライフサイクルメソッドの発生を止められません。
インスタンスの為に、componentWillUpdate と componentDidUpdate が依然として呼ばれてしまいます。