Question

我有一个简单的App.js文件，该文件在浏览器中可以正常显示，但在VS代码编辑器中出现一些问题或错误。

我遇到这些错误-

我的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

检查文件扩展名的.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;

Answer 2

如果您没有正确地将div括在标签中，那么漂亮的或任何其他代码格式化工具将无法为您提供帮助。您在代码末尾忘记了结束</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>

React-如何解决：vs代码中的“ JSX表达式必须具有父对象和表达式”错误

2 个答案: