React.createElement：类型不应为空

Posted 2023-02-23

【中文标题】React.createElement：类型不应为空

【英文标题】：React.createElement: type should not be null

【发布时间】：2017-03-03 17:05:23

【问题描述】：

首先，我希望这不是重复的 - 我使用的是 ES6，而不是常规的 extends React.Component。

这是我的Layout 组件。我将这个实现到app.js 为import Layout from './components/Layout'; 并且控制台抛出错误：

React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of "Layout".

const Layout = (props) => 

    let  location  = props;

    return (
        <div>
            <Nav location=location />
            <main>
            </main>
        </div>
    );
;

export default Layout;

怎么了？这是 React/Redux 环境。

【问题讨论】：

你应该检查导入

为什么，有什么问题？

如果main 是组件，它应该以大写字母开头。签入控制台Nav，它不应该是未定义的

这个警告意味着在import Layout from './components/Layout' 期间出现问题并且布局变量为空:) 你能显示你的app.js，目录结构吗？你还在用 webpack 什么的吗？

我正在使用 webpack

【参考方案1】：

您的export 声明可能是错误的，如docs 所示：

请注意，导出默认值不能使用 var、let 或 const。

尝试改变

export default Layout;

到

export  Layout as default ;

【讨论】：

对不起，不是这个，还有这个问题:(

嗯，你添加了'import React from 'react'；'在布局的开头？

我找到了问题，<Nav location=location /> 的实现有问题，但是为什么？像这样实现 - import Nav from 'layout/Nav';

【参考方案2】：

错误提示Check the render method of "Layout".

这是一个很好的提示，错误不是来自app.js，而是来自您的Layout 组件。很可能这就是您导入Nav 的方式。如果您的导入语句如下所示：

import Nav from "/path/to/Nav";

尝试将其更改为：

import Nav from "/path/to/Nav";

---

进一步说明：使用default 导出可让您在导入时省略大括号。

// if Nav component export looks like this:
export default Nav;
// OR
export  Nav as default ;
// import it as such:
import Nav from "/path/to/Nav";

// if Nav component export looks like this:
module.exports =  Nav ;
// import it as such:
import  Nav  from "/path/to/Nav";

如果您使用了错误的导入方法，则可能会出现错误React.createElement: type should not be null[...]（取决于模块是否使用default 导出）。