代码之家  ›  专栏  ›  技术社区  ›  Afsanefda

元素类型无效:需要字符串(对于内置组件)或类/函数(对于复合组件),但得到:符号

  •  3
  • Afsanefda  · 技术社区  · 6 年前

    lazy Loading

    index.js

    import React, { Suspense , lazy , Component } from 'react';
    import ReactDOM from 'react-dom';
    import 'index.scss';
    import SomeComponent from './someComponent.js';
    import * as serviceWorker from 'serviceWorker';
    
    ReactDOM.render(<SomeComponent />, document.getElementById('root'));
    serviceWorker.unregister();
    

    import React, { Suspense , lazy , Component } from 'react';
    import { BrowserRouter } from 'react-router-dom';
    const Header = lazy(() => import('./_header'));
    
    class SomeComponent extends Component {
      render() {
        return (
          <BrowserRouter>
              <React.Fragment>
                <Suspense>
                  <Header />
                </Suspense>
              </React.Fragment>
          </BrowserRouter>
        );
      }
    }
    
    export default SomeComponent;
    

    头文件index.js

    import React, { Component } from 'react';
    import './index.scss';
    
    class Header extends Component {
        render() {
            return (
                <h1>Header</h1>
            );
        }
    }
    export default Header;
    

    但我有一个错误:

    元素类型无效:应为字符串(对于内置组件)或类/函数(对于复合组件),但得到:符号。

    .

    2 回复  |  直到 6 年前
        1
  •  5
  •   Afsanefda    6 年前

    Suspense and lazy 可在以下版本中访问:

    "react": "^16.6.3"
    "react-dom": "^16.6.3"
    

    此错误与 react-dom 没有正确升级!

        2
  •  1
  •   Filip Dupanović    6 年前

    下面是一个非常简单的示例,它应该使用类似的依赖项。

    Edit lazy-header

    import('./_header') { fallback }