Реагируйте - Как решить: «У выражения JSX должен быть родитель и ожидаемое выражение» ошибка в коде

Question

У меня есть простой файл App.js, который прекрасно отображается в браузере, но я получаю некоторые проблемы или ошибки в редакторе кода VS.

Я получаю эти ошибки -

My App.js:

import React, { Component } from "react";
import css from "./App.less";
import DonutChart from "./DonutChart";
import TimeLineChart from "./TimeLineChart";
import DataTable from "./DataTable";
import SidebarSample from "./SidebarSample";

class App extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    let panelLeftCss = css.panel;
    panelLeftCss += " " + css.leftPanel;

    let panelRightCss = css.panel;
    panelRightCss += " " + css.rightPanel;
    return (
        <div>
          <div className="header">
            <div>
              <h1>Welcome Admin, My Dashboard</h1>
            </div>
          </div>
          <div>
            <SidebarSample />
          </div>

          <div className={css.main}>
            <div className={panelLeftCss}>
              <div className={css.panelHeader}>Donut Chart</div>
              <div className={css.panelBody}>
                <div>
                  <DonutChart />
                </div>
              </div>
            </div>

            <div className={panelRightCss}>
              <div className={css.panelHeader}>Line Chart</div>
              <div className={css.panelBody}>
                <div>
                  <TimeLineChart />
                </div>
              </div>
            </div>
          </div>

          <div>
            <div className={css.panelHeader}>Data Table</div>
            <div>
              <DataTable />
            </div>
          </div>
        </div>
    );
  }
}

export default App;

Я также пытался добавить <React.Fragment>, но это не устраняет ошибки в редакторе кода VS.

Есть ли какой-нибудь инструмент, который я могу использовать, который решает это автоматически, например, более симпатичный и т. Д.?

Пожалуйста, направьте меня.

Answer 1

Prettier или любые другие инструменты форматирования кода не помогут вам, если вы не заключите свой тег в теги.Вы забыли закрывающий тег </div> в конце кода.Также у вас есть дополнительный тег </div> рядом с вашим <TimeLineChart>.Проверьте отформатированные коды здесь, как показано ниже.Он должен работать.Вам просто нужно быть более осторожным при размещении тегов.

<div>
    <div className="header">
        <div>
            <h1>Welcome Admin, My Dashboard</h1>
        </div>
    </div>
    <div>
        <SidebarSample />
    </div>

    <div className={css.main}>
        <div className={panelLeftCss}>
            <div className={css.panelHeader}>Donut Chart</div>
            <div className={css.panelBody}>
                <div>
                    <DonutChart />
                </div>
            </div>
        </div>

        <div className={panelRightCss}>
            <div className={css.panelHeader}>Line Chart</div>
            <div className={css.panelBody}>
                <div>
                    <TimeLineChart />
                </div>
            </div>
        </div>

        <div>
            <div className={css.panelHeader}>Data Table</div>
            <div>
                <DataTable />
            </div>
        </div>
    </div>
</div>

Answer 2

Проверьте расширение вашего файла .ts Это должно быть .tsx (если вы используете TypeScript) То же самое для App.js измените его на App.jsx (если вы используете JavaScript) затем,
попробуй это, весь ваш код должен быть в родительском теге, как я делал внутри <div> Как и в случае, когда метод render возвращает только одного родителя, вы должны соблюдать осторожность при написании элементов, имеющих только одного родителя, или вы оборачиваете свой код внутри родителя <div>

import React, { Component } from "react";
import css from "./App.less";
import DonutChart from "./DonutChart";
import TimeLineChart from "./TimeLineChart";
import DataTable from "./DataTable";
import SidebarSample from "./SidebarSample";

class App extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    let panelLeftCss = css.panel;
    panelLeftCss += " " + css.leftPanel;

    let panelRightCss = css.panel;
    panelRightCss += " " + css.rightPanel;
    return (
    <div>
    <div className="header">
        <div>
            <h1>Welcome Admin, My Dashboard</h1>
        </div>
    </div>
    <div>
        <SidebarSample />
    </div>

    <div className={css.main}>
        <div className={panelLeftCss}>
            <div className={css.panelHeader}>Donut Chart</div>
            <div className={css.panelBody}>
                <div>
                    <DonutChart />
                </div>
            </div>
        </div>

        <div className={panelRightCss}>
            <div className={css.panelHeader}>Line Chart</div>
            <div className={css.panelBody}>
                <div>
                    <TimeLineChart />
                </div>
            </div>
        </div>

        <div>
            <div className={css.panelHeader}>Data Table</div>
            <div>
                <DataTable />
            </div>
        </div>
    </div>
    </div>
    );
  }
}

export default App;