我们是否可以在功能组件的 return 之外使用 JSX？

Question

我有一个简单的问题，因为我对功能组件中的 JSX 有点困惑。

我正在做一个小项目来探索 useState() 更复杂的用法，在这个挑战的最后部分，您必须将您键入的联系人呈现到输入表单中。

这是我的代码：

import React, { useState } from "react";

function App() {
  const [inputData, setInputData] = useState({ firstName: "", lastName: "" });
  const [contactsData, setContactsData] = useState([]);

  function handleChange(event) {
    const { name, value } = event.target;
    setInputData((prevData) => {
      return {
        ...prevData,
        // will copy over all properties from the previous input data and then replace whichever one we are currently working on with the updated value
        [name]: value,
      };
    });
  }

  function handleSubmit(event) {
    event.preventDefault();
    setContactsData((prevContacts) => [...prevContacts, inputData]);
  }

  const contacts = contactsData.map((contact) => (
    <h2 key={contact.firstName + contact.lastName}>
      {contact.firstName} {contact.lastName}
    </h2>
  ));

  return (
    <>
      <form onSubmit={handleSubmit}>
        <input
          placeholder="First Name"
          name="firstName"
          value={inputData.firstName}
          onChange={handleChange}
        />
        <input
          placeholder="Last Name"
          name="lastName"
          value={inputData.lastName}
          onChange={handleChange}
        />
        <br />
        <button>Add contact</button>
      </form>
      {contacts}
    </>
  );
}

export default App;

我的问题是为什么const 联系人在返回之外有 JSX？我认为所有 JSX 都必须在返回范围内？

当我尝试在没有外部 const 变量的情况下输入联系人时，出现引用错误？

谢谢！

Answer 1

您可以将 JSX 放在您喜欢的任何地方。虽然 JSX 看起来有点像 html，但它实际上被转换为一系列对 React.createElement 的调用。例如，您想知道的代码片段会被转译为：

const contacts = contactsData.map(contact => {
  return React.createElement(
    "h2", 
    { key: contact.firstName + contact.lastName }, 
    contact.firstName,
    " ",
    contact.lastName
  );
});

每次调用 React.createElement 都会返回一个对象，描述要渲染到页面该部分的内容。您可以使用这些对象做任何您喜欢的事情。最常见的是，您将从函数返回它们（正如您所习惯的那样），但它们也可以像这里发生的那样分配给变量。

因此，如果您将其作为 return 语句的一部分执行，那么您将在线创建一个数组，然后将其作为参数之一传递给对 React.createElement 的调用。使用您实际编写的代码，您将创建相同的数组，只需预先完成并将其保存到变量中，然后稍后将其传递给 React.createElement 。