问题标签 [react-16]

我正在使用带有react-router(4.3.1) 的最新版本 (16.6) 的 React，并尝试使用React.Suspense.

尽管我的路由工作正常，并且代码确实分成了几个动态加载的包，但我收到了关于不返回函数而是返回对象的警告Route。我的代码：

控制台警告如下： Warning: Failed prop type: Invalid prop `component` of type `object` supplied to `Route`, expected `function`.

正常导入会返回一个函数，但动态导入lazy()会返回一个对象。

对此有任何修复吗？

如何将一个或多个路由包装在错误边界组件中？我正在使用 React 版本 16 并尝试将两条路由包装在错误边界中，但遇到了一些意外行为。

我根本没有收到任何错误消息 - 但一个组件有时不会挂载。

当使用同一个子组件（表单）在两条路由之间切换时，父组件根本不会更新或挂载。但是，Web 浏览器位置栏中的 URL 会正确更新。（我使用相同的子组件进行添加/编辑，但使用不同的道具）

这是错误边界的问题吗？我需要以某种方式指导它吗？

我已阅读 reactjs.org 上的文档，但找不到有关我的问题的任何信息。我是否错过了 ErrorBoundary 应该如何工作？

如果您能引导我朝着解决此问题的正确方向前进，我会很高兴。

请参阅下面的简单代码示例。

错误边界组件

更新

我还尝试将组件（而不是路由）包装在ErrorBoundary 组件中。

我现在收到一个错误（组件已正确导入 - 我可以在同一文件的其他地方使用它们）

我已经阅读了多个来源，现在可以多次调用reactFiber（异步渲染） 。componentWillMount()

为什么会发生这种情况？

我仍然是 React 的新手。所以这里我用两条路径渲染根组件：Home 和 About 位于功能组件中：分别是 home.js 和 about.js。然而，即使在使用精确属性和，根组件继续在上面渲染。当我重定向到任何提到的路线时，我仍然无法弄清楚如何不呈现根组件？

这是现场演示：https ://codesandbox.io/s/vmz6zwq0k7

由于 webpack 4 和 react-loadable，我刚刚开始使用代码拆分和动态导入在服务器端渲染一个 react 16 应用程序。

我的问题可能听起来很愚蠢，但有些东西我不太明白。

在服务器端，我正在等待 webpack 已加载所有模块，然后再将 html 吐出给客户端。

在客户端，在渲染加载的组件之前，我渲染了一种加载组件。

所以基本上服务器渲染加载的组件：

客户端水合加载组件：

显然，问题在于 React 在 hydrate() 之后抱怨，因为服务器和客户端之间存在匹配错误。

在几秒钟内，客户端首先呈现

而服务器已经渲染并发送给客户端，加载组件的 html。

有人可以启发我吗？它是如何工作的？加载组件时如何防止在第一次渲染时出现不匹配？

我刚刚将我的 create-react-app 更新到了 2.1.1 版本，它增加了对 typescript 的支持（检查一下）。

通过命令npx create-react-app my-app --typescript，默认情况下可以使用打字稿创建一个反应应用程序，但添加惰性

导致此错误

可能我在这里遗漏了一些东西

谢谢

我目前正在使用带有 Suspense 和 Lazy 的 React 16 来对我的代码库进行代码拆分。虽然我想预加载组件。

在下面的示例中，我有两条路线。有没有办法在安装Demo后立即预Prime加载？我试图在componentDidMount页面中创建另一个动态导入Prime，但React.lazy似乎没有得到与下面的动态导入相同的文件。

因此，我尝试了不同的方法，例如使用和不使用webpackChunkName以及在 中导入其他组件的不同方式，componentDidMount如下所示。导入文件的前两种方法componentDidMount导致了下图底部显示的 Webpack 错误。只有第三个继续，但2.[hash].js在图像中制作文件，仅在访问页面后加载，而不是在componentDidMount

我在这里想念什么？

代码modules/Demo.jsx：

上下文 我创建了一个上下文并导出了生产者和消费者。我现在用 Producer 包装我的应用程序级示例。我希望能够在由不同包提供服务的模块中使用 ContextConsumer。

但是，当我尝试在此类模块中使用 ContextConsumer 时，它会抛出错误，cannot call function of undefined.

代码结构 下面是我的代码结构。

上下文-v1 包

上下文.js

index.js

Dropdown-v1 包 这个组件使用了另一个名为 Menu-v1 的组件，我试图在其中使用 Consumer 访问我从应用程序级别示例传递下来的增量函数。

应用程序示例 最后，我尝试在我的应用程序中使用这个 Dropdown 模块。这是我希望看到增量函数通过上下文传递的地方。

从'@ids/context-v1'导入{ IDSContextProvider }；从'@ids/dropdown'导入{下拉菜单项}；

我的示例中的模态组件

请求对此的热切帮助。我之前尝试过这个论坛的解决方案，但找不到任何方法让来自不同包的模块共享上下文。

我在 gh-pages 上托管了 react/webpack 应用程序。Favicon 和 Manifest 图标未显示。

favicons、manifest 文件夹和 manifest.webmanifest 文件放在 client/assets 文件夹中。

<网站图标设置>，

1. 应用程序.js

导入'./assets/favicons/favicon.ico'；

2. Webpack.config

3. 索引.html

<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon.png" /> <link rel="icon" type="image/png" sizes="32x32" href ="/favicon-32x32.png" /> < link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" /> < link rel="mask-icon " href="/safari-pinned-tab.svg" color="#5bbad5" /> < 链接 rel="快捷图标" href="/favicon.ico" type="image/png/ico" />

<清单设置>

1. 索引.html

<link rel="manifest" href="/client/assets/manifest.json" />

2. 网络包配置

[ EDITION ] 我添加了 CopyWebpackPlugin 以将 manifest 文件夹和 manifest.json 复制到 dist 文件夹。现在 Manifest.json 文件有效。但图标仍未显示在主屏幕上。

webpack.base.js

webpack.prod.js

将 react 版本从 15.6.2 升级到 16.2.0。

但是在运行应用程序的构建时面临以下问题，

../node_modules/react-addons-update/index.js [INFO] 中的错误找不到模块：错误：无法解析 'D:\Projects\MyTask\web\node_modules\react 中的 'react/lib/update' -addons-update' [信息] @ ../node_modules/react-addons-update/index.js 1:17-44

package.json "react": "^16.6.3", "react-dom": "^16.6.3"

你能帮我解决上述问题吗？