时间戳

首页 > 解决方案 > 我们是否允许在功能组件的 return 之外使用 JSX？

javascript - 我们是否允许在功能组件的 return 之外使用 JSX？

问题描述

我有一个简单的问题，因为我对功能组件中的 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 变量的情况下输入联系人时，我得到一个参考错误？

谢谢！

标签： javascriptreactjsfunctional-programmingreact-functional-component

解决方案

你可以把 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。

推荐阅读