没有子元素的 JSX 元素必须是自闭合的 [英] JSX elements with no children must be self-closing

问题描述

我可以正确运行此代码.但是，当我将代码提交到 git 时，它会显示错误:src/layouts/index.tsx:25:9 - 没有子项的 JSX 元素必须自关闭".

我尝试添加 React.Fragment 标签.但它不起作用.我也删除了第 25 行.但同样的错误显示.仍然是index.tsx:25:9".我也尝试过使用自动关闭.但我必须将值放入 M​​enu.Item.

这是我的代码:

import * as React from 'React';从'antd'导入{菜单，图标}；导入'./test.less';从'./index.css'导入样式；const SubMenu = Menu.SubMenu;类 LeftBar 扩展了 React.Component{构造函数(道具:任何){超级(道具)；}hideLeftBar = () =>{//console.log(styles);}公共渲染(){返回 (<div className={styles.leftbar}><菜单className={styles.menu}模式=内联"//openKeys={this.state.openKeys}//onOpenChange={this.onOpenChange}样式={{ 宽度:250 }}><SubMenu className="test" key="sub1" title={<span><Icon type="mail"/><span>导航一</span></span>}><Menu.Item key="2">选项2</Menu.Item><Menu.Item key="3">选项3</Menu.Item><Menu.Item key="4">选项4</Menu.Item></子菜单><SubMenu key="sub2" title={<span><Icon type="appstore"/><span>导航二</span></span>}><Menu.Item key="5">选项 5</Menu.Item><Menu.Item key="6">选项6</Menu.Item><SubMenu key="sub3" title="子菜单"><Menu.Item key="7">选项 7</Menu.Item><Menu.Item key="8">选项 8</Menu.Item></子菜单></子菜单><SubMenu key="sub4" title={<span><Icon type="setting"/><span>导航三</span></span>}><Menu.Item key="9">选项 9</Menu.Item><Menu.Item key="10">选项 10</Menu.Item><Menu.Item key="11">选项 11</Menu.Item><Menu.Item key="12">选项 12</Menu.Item></子菜单><div onClick={this.hideLeftBar} className={styles.hide}/></菜单>

);}}导出默认 LeftBar；

希望我能提交成功并推送到我的远程仓库.

解决方案

这个错误只是意味着而不是例如:

你应该:

后者是自动关闭的.

I can run this code correctly. But when I commit my code to git, it shows 'ERROR: src/layouts/index.tsx:25:9 - JSX elements with no children must be self-closing'.

I have tried to add React.Fragment tag. But it doesn't work. I also delete line 25. But the same error shows. Still 'index.tsx:25:9'. I also have tried to use to be self-closing. But I have to put value into the Menu.Item.

Here is my code:

import * as React from 'React';
import {Menu, Icon} from 'antd';
import './test.less';
import styles from './index.css';

const SubMenu = Menu.SubMenu;
class LeftBar extends React.Component{
  constructor(props: any) {
    super(props);
  }
  hideLeftBar = () => {
    // console.log(styles);
  }
  public render() {
    return (
      <div className={styles.leftbar}>
        <Menu
          className={styles.menu}
          mode="inline"
          // openKeys={this.state.openKeys}
          // onOpenChange={this.onOpenChange}
          style={{ width: 250 }}
        >
          <SubMenu className="test" key="sub1" title={<span><Icon type="mail" /><span>Navigation One</span></span>}>
            <Menu.Item key="2">Option 2</Menu.Item>
            <Menu.Item key="3">Option 3</Menu.Item>
            <Menu.Item key="4">Option 4</Menu.Item>
          </SubMenu>
          <SubMenu key="sub2" title={<span><Icon type="appstore" /><span>Navigation Two</span></span>}>
            <Menu.Item key="5">Option 5</Menu.Item>
            <Menu.Item key="6">Option 6</Menu.Item>
            <SubMenu key="sub3" title="Submenu">
              <Menu.Item key="7">Option 7</Menu.Item>
              <Menu.Item key="8">Option 8</Menu.Item>
            </SubMenu>
          </SubMenu>
          <SubMenu key="sub4" title={<span><Icon type="setting" /><span>Navigation Three</span></span>}>
            <Menu.Item key="9">Option 9</Menu.Item>
            <Menu.Item key="10">Option 10</Menu.Item>
            <Menu.Item key="11">Option 11</Menu.Item>
            <Menu.Item key="12">Option 12</Menu.Item>
          </SubMenu>
          <div onClick={this.hideLeftBar} className={styles.hide}/>
        </Menu>
      </div>
    );
  }
}

export default LeftBar;

Hoping that I can commit successfully and push it to my remote repository.

解决方案

This error just means instead of e.g.:

<div></div>

you should have:

<div />

The latter is self-closing.

这篇关于没有子元素的 JSX 元素必须是自闭合的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！