タグ: visualeditor |
タグ: visualeditor |
||
| 6行目: | 6行目: | ||
==JavaScript== | ==JavaScript== | ||
? operator など、Conditional rendering を使う。<syntaxhighlight lang="jsx" line="1"> | ? operator など、Conditional rendering を使う。<syntaxhighlight lang="jsx" line="1">// if statement | ||
// if statement | |||
let content; | let content; | ||
if (isLoggedIn) { | if (isLoggedIn) { | ||
| 27行目: | 26行目: | ||
<LoginForm /> | <LoginForm /> | ||
)} | )} | ||
</div></syntaxhighlight>When you don’t need the <code>else</code> branch, you can also use a shorter logical <code>&&</code> syntax:<syntaxhighlight lang="jsx" line="1"> | |||
<div> | |||
{isLoggedIn && <AdminPanel />} | |||
</div> | </div> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
2026年6月24日 (水) 01:12時点における版
- コンポーネント
- Props
- State
JavaScript
? operator など、Conditional rendering を使う。<syntaxhighlight lang="jsx" line="1">// if statement let content; if (isLoggedIn) {
content = <AdminPanel />;
} else {
content = <LoginForm />;
} return (
{content}
);
// ? operator
{isLoggedIn ? (
<AdminPanel />
) : (
<LoginForm />
)}
</syntaxhighlight>When you don’t need the else branch, you can also use a shorter logical && syntax:<syntaxhighlight lang="jsx" line="1">
{isLoggedIn && <AdminPanel />}
</syntaxhighlight>
Next.js
Next.js を参照。