React.createElement：类型不应为空答案

【问题标题】：React.createElement: type should not be nullReact.createElement：类型不应为空
【发布时间】：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

标签： javascript reactjs components redux

【解决方案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 导出）。

【讨论】：