Vue3 踩坑——attribute 在 JSX 中不会忽略空的根元素

现在我需要在项目中集成一个组件，这个组件叫做 PlusPage 组件，新定义它的名字为 BasicPlusPage，我通过直接读取 PlusPage.props 来显示声明运行时的 Props，其他属性 attrs 比如 class 和 style 使用组件自动透传，如下：

import { defineComponent, ref } from "vue";
import type { PlusPageProps } from "plus-pro-components";
import { PlusPage } from "plus-pro-components";

interface BasicPlusPageProps extends PlusPageProps { }

export const BasicPlusPage = defineComponent<BasicPlusPageProps>({
  name: "BasicPlusPage",
  props: PlusPage.props,
  setup(props, { slots, expose }) {
    const renderSlots = () => {
      const slotEntries = Object.entries(slots);
      return slotEntries.reduce((acc, [name, slot]) => {
        acc[name] = () => slot?.();
        return acc;
      }, {});
    };


    return () => (
      <>
        <PlusPage
          {...props}   
        >
          {renderSlots()}
        </PlusPage>
      </>
    );
  }
});

透传失败，因为 return 中有一个空的根元素，如果删除，自动透传则是成功的，有点反直觉，为了组件的健壮性，建议添加 inheritAttrs: false 同时在组件上使用 {...attrs}。

```tsx
import { defineComponent, ref } from "vue";
import type { PlusPageProps } from "plus-pro-components";
import { PlusPage } from "plus-pro-components";

interface BasicPlusPageProps extends PlusPageProps { }

export const BasicPlusPage = defineComponent<BasicPlusPageProps>({
  name: "BasicPlusPage",
  props: PlusPage.props,
  inheritAttrs: false,
  setup(props, { attrs, slots, expose }) {
    const renderSlots = () => {
      const slotEntries = Object.entries(slots);
      return slotEntries.reduce((acc, [name, slot]) => {
        acc[name] = () => slot?.();
        return acc;
      }, {});
    };


    return () => (
      <>
        <PlusPage
          {...props}
          {...attrs}
        >
          {renderSlots()}
        </PlusPage>
      </>
    );
  }
});