反应：我已关闭所有标签，但反应为什么会显示错误？

Question

错误：解析错误：相邻的JSX元素必须包装在一个封闭的标记中。您是否想要JSX片段<> ...？

  

为什么会这样？

import React from "react";
import "./Main.css";
import Pizza1 from "../Pizza1.jpg";
import Byrek from "../Byrek.jpg";

const Byrek1 = () => {
    return (
          <section className="row-2">
          <div className="card2">
            <img src={Byrek} alt="byrek1" />
            <h2>Name: Byrek </h2>
            <h2>Price: 0.70$</h2>
          </div>
        </section>
    );
}

export default class Main extends React.Component {
  render() {
    return (
     <div>
        <h1 className="title">Albanian foods </h1>
        <section className="row-1" >
          <div className="card1">
            <img src={Pizza1} alt="pizza1" />
            <h2>Name: Cheese Pizza</h2>
            <h2>Price: 2$</h2>
          </div>
          </div>
  );
  }
}

Answer 1

您的</section>函数中没有结束render标记：

return (
 <div>
    <h1 className="title">Albanian foods </h1>
    <section className="row-1" >
      <div className="card1">
        <img src={Pizza1} alt="pizza1" />
        <h2>Name: Cheese Pizza</h2>
        <h2>Price: 2$</h2>
      </div>
    </section>
 </div>
)

Answer 2

没有结束部分和div，并且在方括号标记之后：

import React from "react";
import "./Main.css";
import Pizza1 from "../Pizza1.jpg";
import Byrek from "../Byrek.jpg";

const Byrek1 = () => {
    return (
          <section className="row-2">
          <div className="card2">
            <img src={Byrek} alt="byrek1" />
            <h2>Name: Byrek </h2>
            <h2>Price: 0.70$</h2>
          </div>
        </section>
    );
}

export default class Main extends React.Component {
  render() {
    return (
     <div>
        <h1 className="title">Albanian foods </h1>
        <section className="row-1" >
          <div className="card1">
            <img src={Pizza1} alt="pizza1" />
            <h2>Name: Cheese Pizza</h2>
            <h2>Price: 2$</h2>
          </div>
            </section>
            </div>
          )
    }
}

Answer 3

错误消息看起来很不言自明：您的渲染返回两个元素，它们应该包裹在某些东西中，例如片段。

render() {
  return (
    <React.Fragment>
      <ChildA />
      <ChildB />
      <ChildC />
    </React.Fragment>
  );
}

https://reactjs.org/docs/fragments.html