错误：JSX 表达式必须有一个父元素 [重复]答案

【问题标题】：Error: JSX Expressions Must Have One Parent Element [duplicate]错误：JSX 表达式必须有一个父元素 [重复]
【发布时间】：2022-01-05 22:14:20
【问题描述】：

我一直在制作一个密码输入框，但是当我将它放入我的 JS 代码时，它会在标题中出现错误。这是我的代码：（这也在 TailwindCSS 中）

function HomePage() {
  return (
    <div>
      <p className="text-center text-green-600">Welcome to Next.js a!</p>
    </div>
    <div class=" relative ">
      <label for="with-indications" class="text-gray-700">
        Password
        <span class="text-red-500 required-dot">
          *
        </span>
      </label>
      <input type="text" id="with-indications" class=" rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent" name="passwor" placeholder="Password" />
      <div class="grid w-full h-1 grid-cols-12 gap-4 mt-3">
        <div class="h-full col-span-3 bg-green-500 rounded">
        </div>
        <div class="h-full col-span-3 bg-green-500 rounded">
        </div>
        <div class="h-full col-span-3 bg-green-500 rounded">
        </div>
        <div class="h-full col-span-3 bg-gray-200 rounded dark:bg-dark-1">
        </div>
      </div>
      <div class="mt-2 text-green-500">
        Valid password
      </div>
    </div>
  )
}
  
export default HomePage

【问题讨论】：

错误信息有什么不清楚的地方吗？您只能返回一个顶级元素。您正在返回两个顶级 div

标签： javascript html reactjs next.js

【解决方案1】：

您将在顶层返回 2 个divs。使用片段或其他容器元素作为包装器：

<React.Fragment>
  <div>...</div>
  <div>...</div>
</React.Fragment>

【讨论】：