Funktionsaufrufe in JSX

Teil des Abschnitts Grundlagen der React-Journey von Coddy — Lektion 9 von 42.

Da geschweifte Klammern jeden Ausdruck aufnehmen, akzeptieren sie auch Funktionsaufrufe. Definieren Sie einen Helper oberhalb der Komponente und rufen Sie ihn direkt im Markup auf:

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

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

Das hält Komponenten lesbar: Das Markup beschreibt, was angezeigt wird, die Helper beschreiben, wie es berechnet wird. String-Methoden funktionieren ebenfalls direkt:

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

Aufgabe

Einfach

Die Hilfsfunktion fullName erstellt einen Anzeigenamen aus zwei Teilen, aber niemand ruft sie auf.

Lasse den Absatz mit id="author" das Ergebnis des Aufrufs von fullName('Grace', 'Hopper') rendern: er sollte Grace Hopper anzeigen.

Probier es selbst

<!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>