开发时触发React暂停状态

Question

假设我有一个看起来像这样的设置：

function App() {
return (
<React.Suspense fallback={<SomeOtherComponent />}>
<SomeComponent />
</React.Suspense>
);
}

在开发过程中，有没有一种简单的方法可以触发<SomeComponent />挂起一段时间，这样我就可以看到回退状态是什么样子的？

我希望这样做，因为我正在努力确保我的回退状态看起来正确，并且向非回退状态的转换看起来不会很刺耳。我希望有一个解决方案可以使组件在Javascript端以编程方式挂起。

Answer 1

香草溶液(不推荐(

引发悬念的非正式方式是抛出承诺。

const SuspenseTrigger = () => {
throw new Promise(() => {})
}

注意，未来版本的react可能不支持这种触发悬念的方法。请不要在生产中使用，请参阅此答案以了解为什么这不是一个好主意。

实施示例：

const SomeComponent = () => {
const [ready, setReady] = useState(false)
useEffect(() => {
setTimeout(() => setReady(true), 1000)
}, [])
return ready 
? <div>hello world!</div>
: <SuspenseTrigger/>
}
const App = () => 
<Suspense fallback={<div>loading</div>}>
<SomeComponent/>
</Suspense>