使用 es6 导入，您可以这样做：

我也可以这样做React.lazy吗？

我收到以下错误，但我不确定它是否与此错误或我遇到的其他错误有关：

元素类型无效：应为字符串（用于内置组件）或类/函数（用于复合组件）但得到：未定义

我正在 React 中尝试并发模式和悬念，当我尝试从父组件钻取一些模拟数据到子组件时遇到类型错误，因为我的 promise 包装器本身并不知道正在读取的类型。我收到的错误消息是：

TS2739：类型'{数据：任何；}' 缺少“MockData”类型的以下属性：标题、名称、地址、城市

我如何让我的承诺包装器知道返回给它的类型而不明确说明，export const promiseWrapper = (promise: Promise<MockData>): PromiseWrapper => {...因为我想将此承诺包装器用于可能返回其他接口的其他提取？谢谢！

示例组件.tsx：

api.ts：

promiseWrapper.ts：

我正在检查 react docs 中的新并发模式并遇到了这个例子。

如果我们试图加载的数据还没有准备好，组件就会被挂起。

一旦加载数据，组件 ProfileDetails 就会被渲染。

加载数据时导致 ProfileDetails 组件重新呈现的原因。React 是否在挂起状态下不断尝试渲染组件？完整的例子可以在链接中找到

编辑：由于抛出的 Promise，组件首先被挂起，并且 react 等待 promise 被解决，一旦解决，组件就会被渲染。

将钩子的 setter 函数useState用作回调 ref 函数是否安全？这会对 Suspense 或其他即将到来的 React 更改造成麻烦吗？如果“是的，这没关系”，那就太酷了！如果“不”为什么不呢？如果“也许”，那么什么时候可以，什么时候不行？

我问是因为我的一个组件需要安装三个 ref 才能调用 DOM API。其中两个必需的引用是通过 JSX 属性在同一组件中分配的“普通”引用ref。稍后将通过 React 上下文将另一个 ref 分配到深度嵌套的组件中。我需要一种方法来在所有三个 ref 都安装后强制重新渲染父组件，并useEffect在卸载任何 ref 时强制进行清理。

最初我编写了自己的回调 ref 处理程序，它调用了useState我存储在上下文提供程序中的 setter。但后来我意识到，useStatesetter 做了我自己的回调 ref 所做的一切。仅使用 setter 而不是编写我自己的回调 ref 函数是否安全？还是有更好和/或更安全的方法来做我想做的事情？

我尝试了谷歌搜索"useState" "callback ref"（和其他类似的关键字变体），但结果没有帮助，除了@theKashey的优秀use-callback-ref包，我肯定会在其他地方使用（例如，当我需要将回调引用传递给组件时）需要一个 RefObject，或者当我既需要回调又需要在本地使用 ref 时），但在这种情况下，所有回调需要做的就是在 ref 更改时设置一个状态变量，所以 Anton 的包在这里看起来有点矫枉过正。

下面是一个简化的示例，位于https://codesandbox.io/s/dreamy-shockley-5dc74。

我正在尝试使用 useTranslation 钩子在我的反应组件中实现 i18next，但它一直说：

未捕获的错误：渲染时暂停测试，但未指定回退 UI。

在树的较高位置添加一个<Suspense fallback=...>组件以提供加载指示器或占位符来显示。

我怎样才能添加<Suspense>任何高于我所拥有的？我究竟做错了什么？我该如何解决？<Translation>当我使用该组件时，它似乎工作正常。当然，如果我关闭 Suspense 并尝试自己处理它似乎也可以正常工作，但我认为这有点违背目的。我怎样才能使它真正起作用？我是否错误配置了 Fetch 后端？

测试.js

和

i18n.js

我已经查看了我可以找到的文档以及这个不是我的问题的 SO 帖子。

我正在尝试使用 webpack 构建一个基本的反应惰性应用程序。它成功创建了块，但是当应用程序运行时，它在错误的目录中查找块，因此，应用程序崩溃。我的构建目录是dist，我将我的 js 文件放在 dist/js 目录中，但它在根目录中查找块（实时服务器的根目录）。这是实现：

家庭组件：

信息组件：

网络包：

问题 已解决：我使用 live-server 运行应用程序。我尝试了 webpack-dev-server 所以它得到了解决。

我正在尝试创建一个辅助方法来延迟导入反应延迟的模块。

第一个版本，当我修复了导入中的路径时，它可以工作：

但是在第二个示例中，当模块的路径来自变量时，它不起作用，知道为什么吗？

我有以下反应组件：

当我在 input val 中输入内容时，加载悬念的图标会进入和退出悬念状态。

如果图标内部资产已经加载，有没有办法跳过悬念状态？

React 中有一个很酷的新特性——Suspense 组件。目前它只官方支持使用 React.lazy 函数创建的组件。但非正式地众所周知，内部 Suspense 组件是通过在渲染树中更深层次地抛出一个 Promise 来触发的，并且有一些库已经采用了这种技术来带来新的酷炫的开发人员体验，例如：

• 反应-i18next
• 反应中继
• 反应查询

还有一个核心反应包react-cache使用它（当然是非官方的）。

Having all this in mind I'm kinda confused because there is no any mention in React Docs about throwing promises (in other words what triggers Suspense component) but at the same time there are lots of talks and libraries that use it. In twitter discussion dan abramov replied that the API will likely change. But still the situation is confusing.

So the question is: Is it safe to start using this technique in the production? If not, then how can I use libraries (even facebook based) that have already adopted it? Finally, if the API (throwing promises) is the subject to be changed in future, can I be assured that it's just a tiny change that I need to adopt in my own implementation?

Thanks folks!

Update

根据这些问题（一、二），他们似乎仍然不确定未来的 API。他们很可能会提供一个公共 API（可能他们的意思是react-cache或更通用的东西），它本质上只是一个抛出 Promise 机制的包装器。

将 react-i18next 与 Suspense 一起使用。

我想使用 init 回调选项来运行axios 拦截器，以确保所有请求都添加正确的标头语言。

我的问题是 init 回调不会停止 Suspense 来渲染它的孩子。我认为从 init 返回一个承诺会起作用，但事实并非如此。

暂停悬念来解决可能吗？

我的代码：