反応の条件付きレンダリング

条件付きレンダリング

はじめに

reactはユーザー・インターフェースを構築するためのJavaScriptライブラリーであることはわかっています。これを使用して、独自の状態を持つコンポーネントを作成し、これらのコンポーネントからより複雑なUIコンポーネントを構築できます。ただし、場合によっては、
さまざまな機能を実現するために、さまざまな条件に応じてさまざまなUI をレンダリングする必要があります。ReactはJSXを使用してUIコンポーネントを定義しますが、ループや条件式を直接サポートしていませんが、条件付きレンダリングを使用して問題を解決できます。

反応の条件付きレンダリング方法

• もし...それ以外の場合
• nullを使用してレンダリングを防止する
• 要素変数
• そして演算子&&
• 三項演算子
• すぐに呼び出される関数式（IIFE）
• サブコンポーネント
• 高次コンポーネント（HOC）

もし...それ以外の場合

function UserGreeting(props){
	return <h1>Welcome back!</h1>
}
function GusetGreeting(props){
	return <h1>Please sign up.</h1>
}
function Greeting(props){
	const isLoggedIn = props.isLoggedIn;
	if(isLoggedIn){
		return <UserGreeting />;
	}
	return <GusetGreeting />;
}

ReactDOM.render(
	<Greeting isLoggedIn={true} />,
	document.getElementById('condition')
)

上記のコードでは、上記のコンポーネントのどれが表示されるかは、ユーザーがログインしているかどうかによって異なります。

nullを使用してレンダリングを防止する

まれに、他のコンポーネントによってレンダリングされている場合でも、コンポーネントを非表示にしたい場合があります。これを行うには、
レンダリングせずにrenderメソッドで直接nullを返すようにします。

次の例で、<WarningBanner />小道具に基づいてwarnいる場合、値をレンダリングする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?'Hide':'Show'
					}
				</button>
			</div>
		)
	}
}

ReactDOM.render(<Page />,document.getElementById('warning'))

要素変数

変数を使用して要素を格納できます。これは、コンポーネントの一部を条件付きでレンダリングするのに役立ち、他のレンダリングパーツはこのため変更されません

次の例では、我々は、同僚の名前を作成するには、ログインとログアウトボタン表す2つの機能コンポーネントを作成LoginControl
アセンブリと状態を、それが現在の状態に基づいてレンダリングされます<LoginButton />か<LogoutButton>。同時に、それはまた
レンダリングします<Greeting />

function LoginButton(props){
	return (
		<button onClick={props.onClick}>Login</button>
	)
}

function LogoutButton(props){
	return(
		<button onClick={props.onClick}>logout</button>
	)
}

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('login-btn'))

そして演算子&&

コードを中括弧で囲むことにより、任意の式をJSXに埋め込むことができます。これには、JavaScriptの論理AND（&&）
演算子も含まれます。要素の条件付きレンダリングを簡単に実行できます。

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('mail-box')
)

これは、JavaScriptではtrue&&expression常にを返しexpression
、false&&expression常にを返すためfalseです。

したがって、条件場合true、&&右側の要素は、それがある場合に、レンダリングされるfalse、無視して、それをスキップ反応します。

三項演算子

条件付きレンダリングをインライン化する別の方法は、JavaScriptで三眼演算子を使用することですcondition?true:false

<LoginControl />レンダリングするようにアセンブリ

render(){
		const isLoggedIn = this.state.isLoggedIn;
		return(
			<div>
				<Greeting isLoggedIn={isLoggedIn} />
				{isLoggedIn?<LogoutButton onClick = {this.handleLogoutClick} />:<LoginButton onClick ={this.handleLoginClick} />}			
			</div>
		)
	}

すぐに呼び出される関数式（IIFE）

次のコードに示すように、関数をすぐに実行します

(function myFunction(/*arguments*/){})(/*arguments*/)

JSXコードで行き詰まり、大量のロジックを記述したい場合は、先頭に戻るだけでなく、IIFEを使用できます。

function render(){
	return(
		<div>
			{
				(() =>{
					if(renderComponent1){
						return <Component1 />
					}else{
						return <div />
					}
				})()
			}
		</div>
	)
}

サブコンポーネント

これはIIFEの変形であり、即時実行関数のこのビットを通常の関数に置き換えます。

function render(){
	return(
		<div>
			<SubRender />
		</div>
	)
}
function SubRender(){
	if(renderComponent1){
		return <Component1 />
	}else{
		return <div />
	}
}

高次コンポーネント

高次コンポーネントは、新しいコンポーネントを返し、コンポーネントをパラメーターとして受け取る関数です。

次に、より高次のコンポーネントで条件ステートメントを記述し、さまざまなコンポーネントを返すことができます

function highrOrderComponent(component){
	return function EnhancedComponent(props){
		if(condition){
			return <AnotherComponent {...props} />
		}
		return <Component {...props} />
	}
}