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"
            ]
      },
    

      

     

  • 相关阅读:
    存储过程加密
    sql 指删除表,改表名,改字段名
    windows 2003 server 64 位 IIS 6下部署 32位网站
    linux查看内存的使用占比
    linux查看端口是否被占用
    ERROR 2002 (HY000): Can't connect to local MySQL server through socket ‘/var/lib/mysql/mysql.sock' (2)
    mysql数据库的备份(mysqldump)和恢复(source)
    linux解压压缩文件zip/tar/tar.gz命令汇总
    oracle数据库的备份和导入数据
    oracle 备份表数据
  • 原文地址:https://www.cnblogs.com/shuen/p/15015752.html
Copyright © 2011-2022 走看看