vue3 模式下jsx渲染的子组件顺序有问题

[bosens-China]

import { computed, defineComponent } from "vue";

export default defineComponent({
  props: {
    size: {
      type: Number,
      default: 24,
    },
  },
  setup(props, { attrs, slots }) {
    const myClass = computed(() => {
      return [attrs.class, "flex", "justify-between", "items-center"];
    });

    let children = slots?.default?.();

    // if (Array.isArray(children)) {
    //   const newArr = [...children];
    //   for (let i = 1; i <= children.length; i += 2) {
    //     newArr.splice(i, 0, <view style={{ width: props.size + "px" }}></view>);
    //   }
    //   children = newArr;
    // }

    return () => {
      return (
        <view {...attrs} class={myClass.value}>
          {children?.map((item, index) => {
            if (index % 2 !== 0 && index !== children.length) {
              return (
                <>
                  {item}
                  <view style={{ width: props.size + "px" }}></view>
                </>
              );
            }
            return item;
          })}
        </view>
      );
    };
  },
});