526互联

react hooks ts 项目报Empty components are self-closing

发布时间 2023-04-25 11:18:11作者: 三行代码

这个错误通常发生在使用 TypeScript 和 React Hooks 的项目中，它表示你的组件没有正确地关闭。这种情况下，编译器会认为空组件语法是自闭合的，但实际上并不是。

要解决这个问题，你需要检查所有的组件，并确保它们都正确地关闭。一般情况下，你应该避免使用空的 JSX 语法，换而言之，你应该使用一个空的字符串或者 null 来代替。

例如，如果你的组件代码如下：

import React from 'react';

function MyComponent() {
  return (
    <div>
      {/* 这里是空组件 */}
      <MyEmptyComponent />
    </div>
  );
}

function MyEmptyComponent() {
  return <></>;
}

　　

那么你可以修改 MyEmptyComponent 如下：

  
function MyEmptyComponent() {
  return null;
}

　　

或者你也可以使用空的字符串来替代：

  
function MyEmptyComponent() {
  return '';
}

　　

这样，就能够避免 TypeScript 报错了。当然，如果你的组件有其他的逻辑需求，你仍然可以使用空的 JSX 语法，只需要在标签最后加上一个空格即可解决报错问题：

  
function MyEmptyComponent() {
  return <></>; // 注意这里的空格
}

　　

总之，要解决 Empty components are self-closing 错误，你需要检查所有的组件并选择合适的方法来确保它们被正确地关闭。