问题标签 [react-lazy-load]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
reactjs - 如何使用 React Lazy 加载 redux 连接的组件？
我对使用 React.Lazy 加载感到非常兴奋，但是我的组件正在使用 redux，我收到警告错误说
index.js:1 警告：函数作为 React 子级无效。如果您返回一个组件而不是从渲染中返回，则可能会发生这种情况。或者，也许您打算调用此函数而不是返回它。
这是 App.js 的代码
这是我连接的延迟加载组件
即使有警告，这也能投入生产吗？知道如何解决警告吗？
javascript - 无法访问使用 React.lazy 导入的组件的静态属性
我在这样的文件中有一个反应功能组件-
我正在使用这个组件，将它导入另一个使用React.lazy
我正在渲染这个组件React.Suspense，就像这样
但Robert不是渲染。另外，我收到 Typescript 错误Comp.Slot，说
解决此问题的最佳方法是什么？请帮忙。
javascript - 有没有办法检查延迟加载的组件（使用 React.Lazy）是否已完成加载？
我正在开发一个应用程序，如果下一页有任何尚未加载的延迟加载组件，我们希望延迟页面之间的转换。所以我试图弄清楚是否有任何方法可以可靠地检查延迟加载的组件是否已经完成加载。
该解决方案有效，但仅在延迟加载组件第一次尝试加载时才有效——即，如果它立即呈现，因为延迟加载组件已经加载，则不会。
该组件在第一次加载时onLoad正确调用。onComplete然而，在随后的时间里，因为延迟加载的组件现在被缓存了，孩子们被立即渲染并且永远不会渲染回退，这意味着永远不会被调用。onLoadonComplete
我尝试过的一件事是Trigger在主体内放一秒SuspenseTrigger：
这不起作用，因为Suspense即使其他元素没有完全加载，子元素也会立即渲染。因此onLoad，onComplete无论 Suspense 是否完成加载，都会立即被调用。
为了解决这个问题，我还尝试了一些更高级的状态检查（PasteBin 上的代码）。主要的困难是检查后备是否已经呈现，我无法弄清楚如何可靠地做到这一点。我试过在检查之前等待 100 毫秒，但由于某种原因，即使这样也不能可靠地工作。也许有可能useRef？
有任何想法吗？
reactjs - 当我使用 react 测试库、react.lazy 和 suspense 两次开玩笑地运行相同的测试时，为什么加载程序没有显示在第二个测试中？
这是我的代码示例
我遇到的问题是，我希望在运行第二次测试时拥有加载器，但它不存在因此引发错误。
我想知道为什么加载器没有在第二个测试中呈现，它立即呈现登录页面。我怀疑第一个测试会影响第二个测试，但问题是为什么。
我在这里创建了一个对此问题的回复。https://repl.it/@tibetegya/Create-React-App
reactjs - 惰性反应和 HOC 类型，类型“未知”不可分配给类型“组件类型”
嘿伙计们，我是打字稿的新手，我有点困惑，所以如果你能帮助我，我将不胜感激。
正如你在下面看到的
我家功能组件
我的特设
我反应懒惰的成分
我面临的错误是在反应惰性组件中，它是：
在此错误之后，我尝试将 ComponentWrapper 强制导出为 React 组件类型，但我遇到了另一个错误，它位于主组件中：
reactjs - 当它到达数组末尾时，如何将 react-lazyload 占位符属性设置为无？
我正在为我的 react js 项目使用 react-lazyload 库。
我首先使用 useEffect 获取数据：
然后我用lazyload显示东西数组，它工作得很好：
所以首先它显示每个项目的占位符道具
加载...
并通过向下滚动显示实际项目。唯一的问题是它不知道项目何时完成并且没有要显示的项目，因此当您到达屏幕末尾并且项目已完成时，它仍然显示
加载...
.如何判断 stuff 数组的长度，以便在到达数组末尾时不显示加载内容？
javascript - 如何在没有设置高度道具的情况下使用 react-lazyload 或 react-lazy-load？
我想延迟加载文章列表组件，但两者都react-lazyload强制react-lazy-load我height正确设置道具。在文档中react-lazyload，他们提到可以在没有高度的情况下使用，但它不适用于我的示例。因为我不在根级别延迟加载。
而且，如果你想知道为什么我不想拥有height道具，因为我不想在我的文章列表旁边看到一个巨大的滚动条。最好在向下滚动时看到滚动条变大。
下面的代码正在运行，但我想在没有height道具的情况下运行它。
有什么建议可以解决我的问题吗？
reactjs - 延迟加载 ReactJS 组件
我正在使用 React 和 React-Router 构建 SPA（单页应用程序）。“员工”是标题中的导航菜单项之一。根据文档-基于路由的代码拆分，我正在尝试像这样使组件延迟加载：
Employees组件看起来像：
问题是 - 单击“员工”导航项时，网页变为空白。我究竟做错了什么？
警告：懒惰：预期动态 import() 调用的结果。而是收到： [object Module] 您的代码应如下所示： const MyComponent = lazy(() => import('./MyComponent'))
reactjs - 在链接悬停时响应发送 API 调用以预加载数据
我正在尝试改进我的 React 应用程序的 UI，我想尝试解决的一件事是如何在用户将鼠标悬停在链接上时预先触发 API 调用，所以当他们被点击时，数据已经加载并且FakeAPI.jsx已经使用来自 API 调用的数据填充了状态
目前我有以下内容：
然后是 API 调用
到目前为止，我提出的唯一解决方案是将 api 调用放入home.jsx，然后在悬停时调用它并将数据作为道具传递，
如下所示：
但是实际上home.jsx是一个非常大的文件，其中包含其他几个函数和 API 调用，我正在努力保持它的整洁，所以我正在寻找另一种解决方案 - 让每次调用都保持在一个路由上，
谢谢你的帮助！