理解 React 函数组件语法答案

【问题标题】：Understanding React Function Component Syntax理解 React 函数组件语法
【发布时间】：2022-08-03 00:16:32
【问题描述】：

我是从 react docs 学习 ReactJS 的初学者。文档给出了一个我在理解和实施方面遇到困难的例子。你能帮我找出我的错误吗？这是我的代码：

import React from \'react\'

function App() {
  return (
    <div>
      function formatName(user) {
      return user.firstName + \' \' + user.lastName;
}

      const user = {
      firstName: \'Harper\',
      lastName: \'Perez\'
};

      const element = (
      <h1>
        Hello, {formatName(user)}!
      </h1>
      );
    </div>
  )
}

export default App

你不应该在你的 return 方法中定义函数。通常，您将在返回方法之前定义函数。在 return 代码之前定义 formatName 和 user 并从 JSX 中引用它。
欢迎来到堆栈溢出！您应该仔细检查您的示例，并可能切换到不同的教程。给出的代码实际上并不能以任何有意义的方式与 react 一起使用。
@我能举个例子吗？
@Robert P 我现在可以从哪里学习？正在学习reactjs官网
此代码不在 React 文档中；你已经将 React 文档中的代码剪切并粘贴到其他不同代码中看似任意的位置。有一个tutorial on the React site（虽然它不是过流的）并且有吨网络上的现代 React 教程。

标签： javascript reactjs

【解决方案1】：

您正在稍后呈现的 return JSX 代码中定义函数和变量。通常，您在函数组件内部但在 return 语句之前定义此类函数和变量。尝试对您的代码进行此修改，看看它是否能解决您的问题。

import React from 'react'

function App() {
    function formatName(user) {
        return user.firstName + ' ' + user.lastName;
    }

    const user = {
        firstName: 'Harper',
        lastName: 'Perez'
    };

    return (
      <div>
        <h1>
        Hello, {formatName(user)}
        </h1>
      </div>
    )
}

export default App;

【讨论】：

反对者请给出您的决定背后的一些理由，以便可以在此处和将来改进答案。我理解对“问得不好的问题”的答案投反对票的概念，但在这种情况下，OP 最终会提出一个与 React 函数组件语法相关的合理问题，这个答案旨在解决这个问题。