【React】三項演算子・二項演算子で要素を表示

React内の要素の表示非表示に使用するとき便利！

例）ボタンを押して要素を消すetc...

const { Component, Button } = React;

const TextContext = React.createContext("");

function App() {
	const [changeText, setText] = React.useState(true);
	return (
		<div>
			<p>初期値がtrue, ボタンクリックでstateがfalseに変更</p>
			
			<br></br>
			<p>changeText ? 値1:値2</p>
			{changeText ? <h1>true</h1> : <h1>false</h1>}
			----------------------------------------------------

			<br></br>
			<p>changeText && 値</p>
			{changeText && <h1>true</h1>}
			----------------------------------------------------
			
			<br></br>
			<p>changeText || 値</p>
			{changeText || <h1>false</h1>}
			 
			<button onClick={() => setText(false)}>Click</button>
		</div>
	);
}

ReactDOM.render(<App />, document.querySelector(".container"));

三項演算子

条件 ? true値1 : false値2

条件が真の場合、演算子は値 1 の値を選択します。そうでない場合、値 2 の値を選択します。標準的な演算子を使用できる場所ならどこでも条件演算子を使用できます。

二項演算子

true  && 値　//表示

false && 値　//非表示

true || 値　　//非表示

false || 値　　表示

const { Component } = React;

function App(){
	return (
		<div>
			<h2>【三項演算子】</h2>
			条件 ? true値1 :  false値2
			{true ? <p>三項演算子true</p> : <p>三項演算子false</p> }
			{false ? <p>三項演算子true</p> : <p>三項演算子false</p>}
			
			<br/>
			<h2>【論理演算子】</h2>
			&&：trueだったら表示
			{true && <p>true&&</p>}
			{false && <p>false&&</p>}
			 
			 <br/>
			 ||：falseだったら表示
			{true || <p>true||</p>}
			{false || <p>false||</p>}
			 
			 
		</div>
	);
}

ReactDOM.render(<App />, document.querySelector(".container"));