JSX記法

JSX記法で条件分岐する場合

export default function Edit() {
	const a = 20;
	return (
		<div { ...useBlockProps() }>
			{ a > 10 && (
				<div className="large">
					<p>大きい</p>
				</div>
			) }
			{ a <= 10 && (
				<div className="small">
					<p>小さい</p>
				</div>
			) }
		</div>
	);
}

JSX記法で三項演算子を使用する場合

export default function Edit() {
	const a = 2;
	return (
		<div { ...useBlockProps() }>
			{ a > 10 ? (
				<div className="large">
					<p>大きい</p>
				</div>
			) : (
				<div className="small">
					<p>小さい</p>
				</div>
			) }
		</div>
	);
}