React 条件付きレンダリング
React では、必要なさまざまな動作をカプセル化するために、異なるコンポーネントを作成できます。そして、アプリケーションの状態の変化に応じて、その一部だけをレンダリングすることもできます。
React の条件付きレンダリングは JavaScript の場合と同じで、JavaScript の演算子 if または条件演算子を使用して現在の状態を表す要素を作成し、React にそれらに基づいて UI を更新させます。
まず2つのコンポーネントを見てみましょう:
function UserGreeting(props) {
return <h1>欢迎回来!</h1>;
}
function GuestGreeting(props) {
return <h1>请先注册。</h1>;
}
Greeting コンポーネントを作成します。これはユーザーがログインしているかどうかに応じて、そのいずれかを表示します。
React インスタンス
function Greeting(props) {
const isLoggedIn = props.isLoggedIn;
if (isLoggedIn) {
return <UserGreeting />;
}
return <GuestGreeting />;
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<Greeting isLoggedIn={false} />
);
試してみる »
要素変数
変数を使用して要素を格納できます。これにより、コンポーネントの一部を条件付きでレンダリングし、出力の他の部分は変更しないままにすることができます。
次の例では、LoginControl という名前のステートフルコンポーネントを作成します。
これは現在の状態に基づいて<LoginButton /> 或 <LogoutButton />をレンダリングし、また前の例の<Greeting />。
React インスタンス
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>
);
}
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<LoginControl />
);
試してみる »
論理積演算子 &&
コードを中括弧で囲むことで、JSX 内に任意の式を埋め込むことができます。JavaScript の論理積 && も含まれており、要素を簡単に条件付きレンダリングするのに便利です。
React インスタンス
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'];
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<Mailbox unreadMessages={messages} />
);
試してみる »
JavaScript では、true && expressionは常にexpressionを返し、一方false && expression は常にfalse。
を返します。したがって、条件がtrue，&&の場合、右側の要素がレンダリングされ、falseの場合、React はそれを無視してスキップします。
三項演算子
条件付きレンダリングのもう1つの方法は、JavaScript の条件演算子を使用することです:
condition ? true : false。
次の例では、それを使用して短いテキストを条件付きでレンダリングします。
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>
);
}
コンポーネントのレンダリングを防ぐ
ごくまれに、他のコンポーネントによってレンダリングされている場合でも、コンポーネントを非表示にしたい場合があります。render メソッドにレンダリング結果の代わりに null を返させることで実現できます。
次の例では、<WarningBanner />プロパティ warn の値に応じて条件付きでレンダリングします。warn の値が false の場合、コンポーネントはレンダリングされません：
React インスタンス
function WarningBanner(props) {
if (!props.warn) {
return null;
}
return (
<div className="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 ? '非表示' : '表示'}
</button>
</div>
);
}
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<Page />
);
試してみる »
コンポーネントの render メソッドが null を返しても、そのコンポーネントのライフサイクルメソッドのコールバックには影響しません。例えば、componentWillUpdate と componentDidUpdate は依然として呼び出せます。
関連項目