在 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 辅助函数用两部分组成显示名称，但没有人调用它。

让带有 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>