我们可以在功能组件中 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 contacts 在 return 之外有 JSX？我认为所有 JSX 都必须在 return?

范围内

当我尝试在没有外部 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 都是一个对象，描述要在页面的该部分呈现什么。您可以使用这些对象做任何您喜欢的事情。最常见的是，您将从一个函数中 return 它们（就像您习惯的那样），但它们也可以像这里发生的那样分配给变量。

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

我们可以在功能组件中 return 之外使用 JSX 吗？

Are we allowed to use JSX outside of return in functional components?

javascript

functional-programming

reactjs

react-functional-component