JSX内での関数呼び出し

CoddyのReactジャーニー「基本概念」セクションの一部 — レッスン 9/42。

波括弧の中には任意の式を記述できるため、関数呼び出しも記述できます。コンポーネントの上にヘルパー関数を定義し、マークアップ内で直接呼び出します：

function shout(text) {
    return text.toUpperCase() + '!';
}

export default function App() {
    return <h1>{shout('hello')}</h1>;
    // 表示: HELLO!
}

これによりコンポーネントの可読性が保たれます。マークアップは何が表示されるかを示し、ヘルパーはそれがどのように計算されるかを示します。文字列メソッドも直接動作します：

<p>{name.toUpperCase()}</p>

チャレンジ

簡単

ヘルパーの fullName は2つのパートから表示名を組み立てますが、誰も呼び出していません。

id="author" の段落が fullName('Grace', 'Hopper') を呼び出した結果をレンダリングするようにしてください。Grace Hopper と表示される必要があります。

自分で試してみよう

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>