reactjs / reactjs/react.dev

Code splitting: React.lazy() example is missing a Suspense wrapper

未关闭
#1,810 7 条评论 15 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

主要语言
JavaScript
星标
11.8k
派生
7.9k
平均合并
1 天 11 小时
30 天内合并 PR
11

描述

I'm not quite sure if this is intentional to only demonstrate how React.lazy() is used, if the API how lazy() works was changed after that part of the docs have been written already, if I am using it incorrectly or if it is actually wrong but in the example but in the code splitting guide you're using a component wrapped in a React.lazy() and do not wrap it in a <Suspense>:

https://reactjs.org/docs/code-splitting.html#reactlazy

When I do that I get an error message:

A React component suspended while rendering, but no fallback UI was specified.

Source

Two paragraphs later Suspense is introduced and then a working example is shown where the lazy-loaded component is correctly wrapped in <Suspense> but I don't know if it is a good idea to have a non-functioning example in the documentation in the first place as it might be misleading.

贡献指南

打开贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

调研方向

阅读链接 URL 上代码拆分指南中的 React.lazy 部分,并将其中的示例与后面的 Suspense 示例进行比较。使用链接的 CodeSandbox 重现该行为,然后更新文档,使 lazy-loading 示例准确无误,并且不会让读者误解所需的 fallback UI。

由索引模型根据 Issue 内容生成。

评估

技术栈
javascript, react
领域
documentation
Issue 类型
文档
难度
2/5
预计耗时
1-3 小时
活跃度
停滞
描述清晰度
基本清楚
新手友好度
55/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。