ES6 ReactJS 警告：React.createElement：类型不应为空、未定义、布尔值或数字

Question

我运行在开发 ReactJS 组件时遇到了一个奇怪的问题，一切正常，但是当我尝试在 ContentBody 中渲染我的 UserPage 组件时，我收到了这个错误

react.js:18798 Warning: 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).

user.jsx 组件

import Link from ‘react’


export default class UserPage extends React.Component {
    function render() {
         return(
             <UserList />  
         );
    }
}

class UserList extends React.Component {
    function render() {
        return(
           {/* jsx code */}
        );
    }
}

class User extends React.Component {
    function render() {
      return(
        <tr>

            <td>{user.name}</td>
            <td>{user.email}</td>
            <td>{user.createdAt}</td>
            <td>{user.updatedAt}</td>
            <td>
                <Link to="/api/user/delete">Delete</Link>
            </td>
        </tr>
    );
    }
}

##########################################
content-body.jsx file
/*————————————–-----------------*/
import UserPage from ‘./page/user.jsx’;

export default class ContentBody extends React.Component {

    constructor(props) {
       super(props)
       this.state = {data: []};
    }

    render() {
        return(

           {/* This should be dynamic and replaced with Router */}

       );
    }
}

它仍然会抛出该错误，不确定我在这里做错了什么？

更新我能够通过正确导入 Link 来解决问题，因为 Link 不是导出默认值 Link 它应该导入为

import {Link} from 'react'

Answer 1

react 包的默认导出不是 Link，因此您必须显式导入 Link。

import { Link } from "react";

如果您不想这样做，请导入所有 react:

import * as React from "react";

然后正确引用 Link：

<React.Link to="/api/user/delete">Delete</React.Link>

ES6 ReactJS 警告：React.createElement：类型不应为空、未定义、布尔值或数字

ES6 ReactJS Warning: React.createElement: type should not be null, undefined, boolean, or number

javascript

ecmascript-6

reactjs

react-jsx

user.jsx 组件