react 当Suspense嵌套在另一个元素中时,SuspenseList revealOrder="forwards"存在问题,

icnyk63a  于 5个月前  发布在  React
关注(0)|答案(3)|浏览(89)

你想要请求一个功能还是报告一个bug?

SuspenseList 目前处于实验阶段,所以它既不是功能也不是 bug。但我认为在稳定之前应该修复这个问题。

当前的行为是什么?

请注意底部的 1000ms(根据 revealOrder 应该显示最后),嵌套版本显示为 2000ms。
这两组 SuspenseLists 之间唯一的区别是,一组将底部两个悬念元素嵌套在一个 div 中。类似于这样:

function App() {
  return (
    <SuspenseList revealOrder="forwards">
      <Suspense fallback={<div>2000ms loading</div>}>
        <A />
      </Suspense>
      <div> {/* nesting */}
        <Suspense fallback={<div>3000ms loading</div>}>
          <B />
        </Suspense>
        <Suspense fallback={<div>1000ms loading</div>}>
          <C />
        </Suspense>
      </div> {/* nesting */}
    </SuspenseList>
  )
}

https://codesandbox.io/s/suspenselist-issues-sdqzb

预期的行为是什么?

我希望它们的行为完全相同。嵌套事物通常出于样式原因而必要。

这个问题影响了哪些版本的 React,以及哪些浏览器/操作系统?在之前的 React 版本中是否可以正常工作?

我在 react@0.0.0-experimental-b53ea6ca0react-dom@0.0.0-experimental-b53ea6ca0 上遇到了这个问题。我不认为在之前的 React 版本中可以正常工作。

57hvy0tb

57hvy0tb1#

根据@sebmarkbage的推文:https://twitter.com/sebmarkbage/status/1197736150737154049,建议这不是一个bug。

我对这个问题的看法是,如果我有一个具有正向revealOrder的单个SuspenseList,然后我决定我想在几个Suspense元素周围放一个div,那么行为会发生变化,而且并不完全清楚为什么会这样。尤其是因为这会影响到“正向”的revealOrder,但不会影响到“反向”或“一起”。这对我来说有点令人困惑。

这是我目前的解决方法(在div内渲染另一个SuspenseList)。

falq053o

falq053o2#

这个问题已经被自动标记为过时,因为它最近没有活动。如果不再发生活动,它将被关闭。感谢您的贡献。

相关问题