开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

react-loadable exception“需要一个字符串(对于内置组件)或一个类/函数(对于复合组件)，但得到了:object”

react-loadable是一个用于React应用程序的库，它可以实现按需加载（code splitting）和代码分割（code splitting）的功能。当使用react-loadable时，有时可能会遇到一个异常：“需要一个字符串(对于内置组件)或一个类/函数(对于复合组件)，但得到了:object”。

这个异常通常是由于在使用react-loadable时传递了一个错误的参数导致的。根据异常信息，我们可以看到传递的参数是一个对象（object），而不是一个字符串或类/函数。

要解决这个异常，我们需要检查react-loadable的使用方式，确保传递正确的参数。以下是一些可能导致异常的常见原因和解决方法：

检查import语句：在使用react-loadable时，我们通常需要使用import语句来导入需要按需加载的组件。确保在import语句中传递的是正确的组件路径，并且没有拼写错误。
检查组件导出方式：确保按需加载的组件是以默认导出（default export）的方式导出的。例如，正确的导出方式是export default MyComponent，而不是export { MyComponent }。
检查react-loadable的使用方式：确保在使用react-loadable时，传递的参数是一个字符串或类/函数。例如，正确的使用方式是Loadable({ loader: () => import('./MyComponent') })，而不是Loadable({ loader: import('./MyComponent') })。

总结起来，当遇到react-loadable异常“需要一个字符串(对于内置组件)或一个类/函数(对于复合组件)，但得到了:object”时，我们需要检查import语句、组件导出方式和react-loadable的使用方式，确保传递正确的参数。如果仍然无法解决问题，可以查阅react-loadable的官方文档或社区支持，以获取更多帮助。

腾讯云相关产品和产品介绍链接地址：

云函数（Serverless）：https://cloud.tencent.com/product/scf
云开发（CloudBase）：https://cloud.tencent.com/product/tcb
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
云数据库 MySQL 版（TencentDB for MySQL）：https://cloud.tencent.com/product/cdb_mysql
云存储（COS）：https://cloud.tencent.com/product/cos
人工智能（AI）：https://cloud.tencent.com/product/ai
物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mps
区块链（BCS）：https://cloud.tencent.com/product/bcs
元宇宙（Metaverse）：https://cloud.tencent.com/product/metaverse

相关搜索:应为字符串(对于内置组件)或类/函数(对于复合组件)，但得到的是: object X错误:元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件)，但got: object React.createElement:类型无效-需要字符串(对于内置组件)或类/函数(对于复合组件)，但got: undefined 元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件)IE11:元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件)，但got: object react-window元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件)，但got: object 元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件)，但got: undefined ReactDOM -元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件)，但got: undefined 错误:元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件)，但got: undefined React错误:元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件)，但got: undefined 元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件)，但得到:未定义 React.createElement:类型无效--应为字符串(对于内置组件)或类/函数(对于复合组件)，但得到: null Material UI:元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件)，但got: null 错误:元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件) React JS 为什么我得到“元素类型无效:需要一个字符串(对于内置组件)或一个类/函数(对于复合组件)...”？React映射错误需要一个字符串(对于内置组件)或一个类/函数(对于复合组件)，但得到的是:未定义获取错误:应为字符串(对于内置组件)或类/函数(对于复合组件)，但获取：%s.%s%s，未定义，Apollo客户端:错误:元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件)元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件)，但在reactjs中获取:未定义 React错误-元素类型无效:应为字符串(对于内置组件)或类/函数

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

使用 React.Suspense 替换 react-loadable

Step 1：升级到 React 16.6 对于 v16 的用户来说，可以直接升级到 16.6，但是对于v15的用户来说，请按照官方迁移说明来升级。...我们定义一个React.Suspense组件，其中包含一组fallback JSX，以便在我们等待异步加载时进行渲染。通常，这将是一个微调器或其他等待指示器。...是的， React.Suspense 没有在内置支持 delay 功能，因此，即使加载工程只需要几毫秒的时间， fallback也会被执行，就上述代码来说，也就是 Spinner 会闪烁一下，如果资源被加载得非常快得话...就目前而言，我们需要自己在 fallback 得组件中自行处理这些逻辑，例如在 componentDidMount 中设置一个定时器，使其直到将来的某个时间才呈现。...react-loadable 优秀的库当然有内置的方法支持处理加载失败的情况 const Loading = (props) => { if (props.error) { return <

4.3K14 0

Guava骚操作，10分钟搞定日志脱敏需求！

都非常好用，但实际上大部分人只用到了其1%不到」的功能。日志脱敏到底是个啥敏感信息脱敏」实际上是隶属于安全领域」的一个子领域，而日志脱敏」又是敏感信息脱敏」的一个子领域。...*********49"} 所以，很自然的，我们就写了个脱敏组件」，在每一个字段上用注解」来标识每一个字段是什么类型的敏感字段，需要怎么脱敏。...那其实我们最终要解决的问题是：Map对象序列化后的字符串得是按照key的脱敏规则脱敏后的字符串。...这对于我们做基础组件的同学来讲，是一件尤其需要注意的事情。因为一旦使用了前后不兼容的API,那么使用组件的应用很可能因为API不兼容，导致无法运行的问题。...所以对于做组件的同学，对于Guava的使用一定要慎重：能不用就不用，必须要用的话一定不能使用以@Beta注解标注的方法或者类。

2251 0

聊聊React中的权限组件设计

最近维护的一个后台系统需要加入权限管理控制，这次技术栈是React，我刚开始是在网上搜索一些React路由权限控制，但是没找到比较好的方案或思路。...数据权限一般指对于不同用户，同一页面上看到的数据不同。本文主要是来探讨一下资源权限，也就是前端权限控制。...component代表路由对应的组件： import React, { createElement } from "react" import Loadable from "react-loadable..., app: PropTypes.object } export default RouterConfig 这是一个非常常规的路由配置，既然要加入权限，比较合适的方式就是包一个高阶组件AuthorizedRoute...接着分别对authority为字符串和数组的情况做了处理，其实就是简单的查找匹配，匹配到了就可以访问，匹配不到就返回Exception，也就是我们自定义的异常页面。

2.8K1 1

微信移动端数据库组件 WCDB 系列：iOS 基础篇（一）

但其对代码侵入性很强，Realm要求类继承RLMObject的基类。这对于单继承的ObjC，意味着不能再继承其他自定义的子类。同时，key-value数据库对较为复杂的查询场景也比较无力。...SQLite本不是一个易用的组件：为了完成一个查询，往往我们需要写很多拼接字符串、组装Object的胶水代码。这些代码冗长繁杂，而且容易出错，我们希望组件能统一完成这些任务。...另一种方式则是获取WCTTransaction对象[1500348543659_322_1500348543943.png]WCTTransaction对象可以在类或函数间传递，因此这种方式也更具灵活性...而WINQ将查询语言集成到了C++中，可以通过类似函数调用的方式来写SQL查询。借用IDE的代码提示和编译器的语法检查，达到易用、纠错的效果。...对于熟悉SQL的开发者，无须特别学习即可立刻上手使用。高级用法 as重定向基于ORM的支持，我们可以从数据库直接取出一个Object。然而，有时候需要取出并非是某个字段，而是有一些组合。

6.1K3 1

在 React Native 中原生实现动态导入

然而，当一个库或模块在代码库的多个时间或多个地方需要时，静态导入就会显得非常有用。相比之下，动态导入赋予开发者在需要时即时导入模块的能力，引领了一个异步范式。这意味着代码是按需加载的。...你可以使用 React.lazy() 函数来创建一个包装动态导入的组件，你可以使用 Suspense 来显示一个备用组件，而动态导入正在加载。...库中导入 Loadable 函数定义一个加载组件（例如，一个 ActivityIndicator ），在目标组件加载时将会显示。...使用 Loadable 函数创建一个动态组件。为 loader 属性提供一个导入目标组件的函数（将 '....这对于提供流畅的用户体验至关重要，尤其是在设备或网络较慢的情况下。提高代码可维护性：动态导入可以通过让你将不常用的组件或库分离到单独的模块中，更有效地组织你的代码库。

3121 0

微信移动端数据库组件WCDB系列（一）-iOS基础篇

但其对代码侵入性很强，Realm要求类继承RLMObject的基类。这对于单继承的ObjC，意味着不能再继承其他自定义的子类。同时，key-value数据库对较为复杂的查询场景也比较无力。...SQLite本不是一个易用的组件：为了完成一个查询，往往我们需要写很多拼接字符串、组装Object的胶水代码。这些代码冗长繁杂，而且容易出错，我们希望组件能统一完成这些任务。...另一种方式则是获取WCTTransaction对象 WCTTransaction对象可以在类或函数间传递，因此这种方式也更具灵活性。...而WINQ将查询语言集成到了C++中，可以通过类似函数调用的方式来写SQL查询。借用IDE的代码提示和编译器的语法检查，达到易用、纠错的效果。...类字段绑定在ORM中，我们通过宏，将ObjC类的property绑定为数据库的一个字段。但并非所有property的类型都能绑定到字段。

2.5K8 1

com组件与dll的区别_组件对象模型

提出com规范主要是为了满足： 1.程序的快速开发，可以将一个大型的工程分成若干个com组件同时开发。 2.可以动态的插入或卸载com组件。 3.可以隐藏或封装com组件内部的实现细节。...com组件可以由不同的语言进行编写，但com组件之间的通信是通过组件的接口来实现的，com组件接口的实现是统一的，它采用的是虚拟函数表（VTBL）形式。...，这时候类库中的源代码就成为了你的应用程序中的一部分，将来如果要是类库的设计者重新修改了他们的类库，那么你的应用程序就需要重新编译链接你的应用程序，这对于已经到了最终用户手中的你的应用程序的升级很麻烦，...这就需要提供一种机制来解决上面的问题，把你的可重用的代码做成一个Dll的形式包装起来是一个可行的方法，在这个Dll中导出一些你需要提供给第三方使用的类、全局函数、数据等，这样你就可以在最终用户的机器上保持一份你的...它们的主要区别是： 1）组件可以在另一个称为容器（有时也称为承载者或宿主）的应用程序中使用，也可以作为独立过程使用； 2）组件可以由一个类构成，也可以由多个类组成，或者是一个完整的应用程序； 3）组件为模块重用

1.4K4 0

-- react版的倒计时实现

而我们刚才已经分析过，div里面就是ul，ul里面就是li，，，，那么，用react生成的第一个组件类，就是ul，使用 React.createClass 生成第一个组件类： //要记得react里的组件类... } }); 这里用到了 render 方法，该方法会返回一个React组件树，用来接受该组件树的变量名称必须首字母大写。...//=================== 而react它的特点之一，就是把组件看成一个状态机，有一个初始状态。然后当“情况或条件”发生改变的时候，导致状态变化，然后重新渲染ui了。...你得往Day这个组件里传数据啊，我们需要给组件添加一个属性组件的属性可以接受任意值，字符串、对象、函数等等都可以，也就是说，基本可以随便命名，当然你不能乱写，差不多就行写一个属性dayVal，...它也得有初始化方法，getInitialState 然后还得有个接收参数的方法，它得用来显示日期呀，因为状态改变了，它做为被加载的组件，得接受新的参数啊需要使用，componentWillReceiveProps

2K7 0

Effective Java笔记（不含反序列化、并发、注解和枚举）

：一些工具类不希望被实例化，而编译器会自动给类提供一个无参构造函数，所以我们可以提供private的构造函数，并且为了防止反射，在里面抛出异常。...:对于每个不同的值都要一个单独对象 3.复合优先于继承： 1.继承的缺点： 1.一个类进行了继承，或许当时类是可用的，但是随着超类的演化，某一时刻其可能就不可用了 2.超类的有些可继承的方法，可能在自身实现的时候进行了...2.复合转发就可以代替一部分继承的情况 1.如HashSet，我们需要在其上面扩展，可以让类实现Set并内置一个HashSet对象，然后在各个方法中调用HashSet的相应方法，当然可以在调用前后进行我们自己的操作...4.在绝大部分情况下用复合替代继承，能隐藏被拓展类细节，恶意避免被扩展类中api的缺陷，被传染到拓展类中 4.要么为继承而设计并提供文档说明要么禁止继承： 1.要设计一个可被继承的类，需要做的事情...那么我们需要进行保护性拷贝，即重新创建一个与内部组件信息相同的组件然后返回，这里可以用clone方法。

95411 0

Vue隐藏技能：运行时渲染用户写入的组件代码！

大致说一下项目的背景：我们做了一个拖拽生成报表的系统，通过拖拽内置的组件供用户定制自己的报表形态，但毕竟内置的组件有限，可定制性不高，那么给用户开放一个 code 组件，让用户自己通过写template...毕竟不是纯 js 文件，是不能直接运行的，它需要一个运行时环境，运行时编译，这个环境就是 vue 的运行时 + 编译器[2]。有了思路也只是窥到了天机，神功练成还是要打磨细节。...想一下为什么要在components中先注册(声明)下组件，然后才能使用？component 本质上只不过是一个 js object 而已。...[16]，这个限制导致Function类型的数据无法传过去，但组件很多功能需要使用函数才能实现，无法跨越这个限制，组件能力将损失过半或更甚。...但 component 对象经过序列化后，其内部的函数被转成了字符串，因而丢失了函数的所有特性，闭包也因此丢失，经反序列化回来后，虽然还原了函数，但闭包关系无法恢复，因此，这种写法，在执行 render

3.6K1 0

面向面试编程连载(一)

每个函数接口都有一个抽象方法，称为该函数接口的函数方法，lambda 表达式的参数和返回类型与该方法匹配或调整。...而且，在往ArrayList、HashMap这些容器传数据的时候，基本类型int和double是传输不进去的，因为容器都是装object类型的，所以需要转为包装类型进行传输。...其中M指的是可存储的字符长度(或字符数)，而MySQL实际是按字节存储的，在不同的字符集下一个字符的字节长不同，因此这个M最大值在不同的字符集下值不同：对于latin字符集下，因为一个字符占一个字节，...所以M的最大值为65535(但实际只有65532)；对于gbk字符集，因为一个字符占两个字节，所以M的最大值为32767；对于utf8字符集，因为一个字符占两到三个字节，所以M的最大值为21845。...就是将一些功能（逻辑）封装成组件,目的是提供一个应用程序接口给其它程序与开发人员访问,而这些访问人员不需要访问源码以及理解内部工作原理就可以直接使用 RESTFUL是一种网络应用程序的设计风格和开发方式

8355 0

程序员的25大Java基础面试问题及答案

Java 有自动内存管理机制，不需要程序员手动释放无用内存 2.什么是 Java 程序的主类应用程序和小程序的主类有何不同? 一个程序中可以有多个类，但只能有一个类是主类。...PHP内置模板引擎,自身就是模板语言.而Java Web需要使用JSP容器如Tomcat或第三方模板引擎....对于动态类型，会当做字符串通通存下来，之后存取就用字符串匹配。从编译型还是解释型来看编译型语言，像C、C++，需要编译器编译成本地可执行程序后才能运行，由开发人员在编写完成后手动实施。...由于 Java 5.0 对泛型的支持，现在可以按类型而不是按名称检索 bean，不需要任何强制转换或基于字符串的查找。...该Object.toString()方法返回一个看起来很难看的字符串，该字符串由类的名称，@符号和对象的哈希码（十六进制）组成。

1732 0

Activex、OLE、COM、OCX、DLL

在具体介绍它们的关系之间，我们还是先明确组件(Component)和对象(Object)之间的区别。...组件是一个可重用的模块，它是由一组处理过程、数据封装和用户接口组成的业务对象(Rules Object)。组件看起来像对象，但不符合对象的学术定义。...它们的主要区别是：组件可以在另一个称为容器（有时也称为承载者或宿主）的应用程序中使用，也可以作为独立过程使用；组件可以由一个类构成，也可以由多个类组成，或者是一个完整的应用程序；组件为模块重用...但是COM并不是产品，它需要一个商标名称。而那时Microsoft的市场专家们已经选用了OLE作为商标名称，所以使用COM技术的都开始贴上了 OLE的标签。虽然这些技术中的绝大多数与复合文档没有关系。...DLL文件还有可能是动态链接库，主要是装载一些函数，可以动态加载。

2.5K1 0

Python学习手册(第4版).2

reload是一个被调用的函数，而import是一个语句。可以看到,都是正确得结果....from是将模块中的变量复制进来，变成程序中自己的一个变量或属性，所以可以直接调用；但如果当前程序中存在相同变量名，会导致变量命名冲突。...无论使用的是import还是from去执行导入操作，模块文件myfile.py的语句都会执行，并且导入的组件（对应这里是交互提示模式）在顶层文件中得到了变量名的读取权。...也许在这个简单的例子中只有一个变量名（变量title被赋值给一个字符串），但是如果开始在模块中定义对象，例如，函数和类时，这个概念将会很有用。...这样一些对象就变成了可重用的组件，可以通过变量名被一个或多个客户端模块读取。在实际应用中，模块文件往往定义了一个以上的可被外部文件使用的变量名。

5422 0

透过源码学习设计模式7-适配器模式与HandlerApapter

Target：新的接口类，开放特定接口request来完成某些特定操作，与Client协作。 Adaptee：原有的类，即需要适配的类或被适配者类。...Object handler) throws Exception; 此应用程序逻辑执行将生成模型和视图。视图可以是视图名称字符串或视图对象的形式。模型包含将用于呈现视图的数据。..., response); } 适用场景 1、以前开发的系统存在满足新系统功能需求的类，但其接口同新系统的接口不一致, 需要重复使用现有的类，。...3、使用第三方提供的组件，但组件接口定义和自己要求的接口定义不同, 不希望修改自己的接口，但是要使用第三方组件接口的功能，避免重复造轮子。...，即适配器实现我们的目标接口，但是并不继承需要被适配的类，而是通过在适配器的构造函数中将需要被适配的类传递进来从而进行适配。

7753 0

python异常报错详解

它不是直接由用户定义的类继承（为此使用Exception）。如果 str()或者unicode()是在这个类的一个实例上被调用，返回实例的参数表示形式，或者当没有参数时，返回空字符串。...异常EOFError 当其中一个内置函数（input()或raw_input()）在没有读取任何数据的情况下触发文件结束条件（EOF）时引发。...当函数返回与系统相关的错误（不是非法参数类型或其他偶然错误）时引发。的errno属性是从一个数字错误代码errno，并且strerror属性是相应的字符串，如将被C函数被打印perror()。...异常UnboundLocalError 当引用函数或方法中的局部变量时引用，但没有值绑定到该变量。这是一个子类 NameError。...object 编解码器正在尝试编码或解码的对象。 start 第一个无效数据索引object。 end 上次无效数据后的索引object。

4.6K2 0

React 16 加载性能优化指南（下）

/math").then(math => { console.log(math.add(16, 26)); }); React Loadable 是一个专门用于动态 import 的 React 高阶组件...import Loadable from 'react-loadable'; import Loading from '....下面是一个具体的例子： ? 以这个用户主页为例，起码有三处组件是不需要首次加载的，而是使用动态加载：标题栏、Tab 栏、列表。首次加载实际上只需要加载中心区域的用户头像、昵称、ID即可。...也就是说，在当下 2018 年，对于大部分用户而言，我们根本不需要把代码编译到 ES5，不仅体积大，而且运行速度慢。...我们需要做的，就是把代码编译到 ES2015+，然后为少数使用老旧浏览器的用户保留一个 ES5 标准的备胎即可。具体的解决方法就是标签。

1.6K2 0

Java 设计模式最佳实践：四、结构模式

在本章中，我们将只关注以下 GOF 模式：适配器模式代理模式桥接模式装饰模式复合模式外观模式享元模式我们可能无法详细介绍其他已确定的结构模式，但值得了解。...将此模式应用于具有轻量级接口的类。在其他情况下，通过将所需的策略注入组件（策略模式）来扩展功能是更好的选择。这将保持特定方法的局部更改，而不需要重新实现其他方法。装饰对象及其装饰器应该是可互换的。...在内部，它使用数据结构（如树、图形、数组或链表）来表示模型： JVM 提供了复合模式的最佳示例，因为它通常被实现为一个栈机器（出于可移植性的原因）。从当前线程栈中推送和弹出操作。...操作1+4+2-（反向波兰符号）可以使用复合模式轻松建模，其中每个节点都是值、复数或操作数。...外观模式需要采用内部子系统接口（多个接口）到客户端代码接口（一个接口）。它通过创建一个新接口来实现这一点，而适配器模式适应现有接口（有时需要多个旧类来为新代码提供所需的功能）。

8393 0

Web Components-LitElement 实践

虽然 Lit 模板看起来像字符串插值，但 Lit 解析并创建一次静态 HTML，然后只更新表达式中需要更改的值。...“TemplateResult对象：是 lit-html 接收模板字符串并经过它的 html 标记函数处理得到的一个纯值对象。...但是，它可以返回 Lit 可以渲染的任何内容，包括： primitive 原始类型值，如字符串、数字或布尔值。由 html 函数创建的 TemplateResult 对象。 DOM 节点。...可以为 state 内部状态指定的唯一选项是 hasChanged 函数。省略选项对象或指定一个空的选项对象等效于为所有选项指定默认值。...但如果需要使用自定义元素生命周期方法，确保调用 super 类的生命周期，以保证父子组件生命周期的一致。标准的自定义组件生命周期 constructor()：创建元素时调用。

3.5K4 0

我们如何使用 Next.js 将 React 加载时间缩短 70%

我们对于拥有内置的页面路由原语感到特别兴奋，这样我们就不必手动配置路由和 Webpack 构建。...文件，该文件显式地为应用程序中的每个页面设置了一个路由组件： import Loadable from "react-loadable"; import { Route, Switch } from...虽然 CRA 支持代码分割，但根据我们的经验，Next.js 配置对于本地重建来说是开箱即用的，速度快得多。...例如，我们在其 CSS 模块中将 Button 组件切换到一个有作用域的类名： // components/Button/styles.module.scss .button:disabled {...虽然设置 Vercel 的构建过程需要一些变通方法（因为前面提到的缺乏 Yarn 2 的支持，以及构建我们前端使用的通用包），但好处是巨大的：现在推送到我们 GitHub 仓库的每一个提交都会作为一个预览

4.8K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭