zoukankan      html  css  js  c++  java
  • react使用动态加载组件

    我还是一个react的初学者,一直写vue,在学的过程中突然想起react能不能动态加载,结果好像都要自己实现,vue的路由可以用()=>import(url),

    react 好像没有,然后在网上看了些大佬的资料,结合之后自己项目里面实现的思路,如有什么错误,请评论区指正哈,我好改进

    1.实际的组件A

    import React, { Component } from 'react';
    console.log("test require")
    class Testasnyc extends Component{
        
        render(){
            
    
            return (
                <div>
                    测试异步
                </div>
            )
        }
    }
    module.exports=Testasnyc

    2.父组件引用的组件B

    import React, { Component } from 'react';
    console.log("test import ")
    class Testasnyc extends Component {
        render() {
          const Game1 = require('./index')//引入
            return (
              <Game1/>
            )
        }
    };
    export { Testasnyc }

    实际组件是用一个B组件包裹起来,路由引入的是B组件,而不是A组件,用的require引入

    require/exports 是运行时动态加载,import/export 是静态编译

    所以运行的时候可以看到 项目初始化就可以看到test import的输出 而test require 是等页面打开才输出

    用require如果报错可能是以下原因,下面是我个人踩的坑,给后来人借鉴以下

    require和es6的import混合使用会报错` TypeError: Cannot assign to read only property 'exports' of object '#<Object>'.. `因此需要使用插件`babel/plugin-transform-modules-commonjs`解决问题   
       npm install --save-dev @babel/plugin-transform-modules-commonjs
    添加插件后有两种处理方式
     在项目根目录新增.babelrc文件,并在文件中加入
     {
                "plugins": ["@babel/plugin-transform-modules-commonjs"]
          } 
    

     

    第一种如果以下错误,就需要使用第二种加入方式,因为package里面已集成Babel的配置
    ./src/index.js
    Error: Multiple configuration files found. Please remove one:
     - package.json
     - D:projectprivate
    eact_projectstudyreact-demo.babelrc
    from D:projectprivate
    eact_projectstudyreact-demo
        at Array.reduce (<anonymous>)
        at loadOneConfig.next (<anonymous>)
        at findRelativeConfig.next (<anonymous>)
        at buildRootChain.next (<anonymous>)
        at loadPrivatePartialConfig.next (<anonymous>)

     - 在文件的package.json里面添加  

     "babel": {
            "plugins": [
            [
                "@babel/plugin-proposal-decorators",
                {
                "legacy": true
                }
            ],
            "@babel/plugin-transform-modules-commonjs"
            ],
            "presets": [
            "react-app"
            ]
      },
    

      

     

  • 相关阅读:
    Java实现 蓝桥杯 生命游戏
    Java实现 蓝桥杯 生命游戏
    Java实现UVA10131越大越聪明(蓝桥杯每周一题)
    Linux 静态库&动态库调用
    linux下c++开发环境安装(eclipse+cdt)
    怎样在Windows和Linux下写相同的代码
    教会你如何编写makefile文件
    Linux编译多个不同目录下的文件以及静态库、动态库的使用
    Fedora 17 下安装codeblocks
    Fedora 下安装codeblocks
  • 原文地址:https://www.cnblogs.com/shuen/p/15015752.html
Copyright © 2011-2022 走看看