更漂亮的破坏了jsx的片段

Question

function App() {
    
      return (
       <>
        <
        Navbar / >
        <
        Users / >
       </>
      );
    }

在点击ctrl+Save时，这个更改为

function App() {

  return ( <
    >
    <
    Navbar / >
    <
    Users / >
    <
    />
  );
}

当我悬停在片段上时，它说："JSX片段没有相应的结束标记。“

我又试着装得更漂亮了，没帮上忙

Answer 1

您必须安装Prettier plugin并禁用beautify插件或在VS代码中预先安装的任何其他代码格式化程序。

这可能会帮助您解决当前问题。这是因为这两个插件的工作方式不同，并且保持两个启用的插件在保存时都会拒绝我们使用此格式。禁用，美化和安装更漂亮的插件，帮助我们实现所需的输出。

您可以找到更漂亮的插件(这里)。

Answer 2

解决方案

我卸载了其他格式化程序“美化”。我多次点击"shift+alt+f“来格式化文档，在右下角弹出”存在多个格式化程序。选择一个默认的格式化程序继续“。然后我选择了更漂亮的-code格式化程序

请参阅@Shivanshu在上面评论中提到的https://github.com/prettier/prettier-vscode/issues/449一文

Answer 3

短句法

有一种新的、更短的语法可用于声明片段。它看起来像空标签：

class Columns extends React.Component {
  render() {
    return (
      <>
        <td>Hello</td>
        <td>World</td>
      </>
    );
  }
}

链接：https://reactjs.org/docs/fragments.html#short-syntax