如何在tsx中使用Suspense组件

来源：3-20 Suspense - 异步请求好帮手第二部分

B1ackout

2021-03-03

Suspense组件需要return一个promise或者return 一个对象，无法使用tsx，只能用.vue文件，但是在tsx中引入如何使用呢？我在tsx中这样无法使用，包裹了一层div还是有警告 slots expect a single root node.

<Suspense>
 <template {...{ "v-slot": "default" }}>
   <div>{Async}</div>
 </template>
 <template {...{ "v-slot": "fallback" }}>
   <div>loading</div>
 </template>
</Suspense>

写回答

1回答

张轩

2021-03-04

已采纳

同学你好你tsx 中 slots 的用法写错了，它的 slots 是不能这样写的，应该写成这样。

const slots = {
    default: () => [<div><AsyncShow/></div>],
    fallback: () => [<div>loading</div>]
}
return () => 
<div class="hello">
    <Suspense>
        {slots}
    </Suspense>
</div>

文档在这里：https://github.com/vuejs/jsx-next#slot

经尝试可行

B1ackout

非常感谢！

2021-05-13

共2条回复

Vue3 + TS 仿知乎专栏企业级项目

带你完成前后端分离复杂项目，率先掌握 vue3 造轮子技能

3142 学习 · 2313 问题

查看课程

相似问题

老师请问在tsx中父组件如何接收子组件传递过来的方法呢