React动态加载组件.真

React的动态组件的实现，很多都是使用if else，好的使用三元表达式，再好点的使用switch case，但是随着的更多组件的引入，首先import的文件会越来越多，其次就是switch case的判断分支也会越来越多，作为一个有追求的程序员大叔，这绝对是不能忍的。

之前使用Vue的时候Component :is非常好用，然后我的思路就定格在这上面了，解决发现并没有很好的API直接使用，经过半天的调研，最终把方案定格在webpack的require.content上，不废话直接上代码。

* 组件动态化核心方案* author: carry* update: 2021/08/11 14:40const files = require.context("./", true, /\.jsx$/);const comps = {};files.keys().forEach((key) => {const Comp = files(key).default;const name = Comp.name && !comps[Comp.name] ? Comp.name : key.replace(/\.\/(.*?)\.jsx/, "$1");comps[name] = ;export default comps;

使用require.context可以获取指定目录下的文件，然后保存其内容到一个对象中，key使用Jsx export出来的function name，如果为空或者重复的话使用路径，这个地方命名需要严格控制，避免重复或者意义不清的情况产生。

接来下我们再看看使用的地方

import React from "react";import { ContextProvider } from "./reducer";import Components from "./components";const App = () => {return (["Counter", "CounterTest", "Counter1"].map((key) =>{ return Components[key]; })};export default App;

使用require.context的方案好处就是文件夹下的组件新增的时候无需手动引入，这样实现才是真正的动态，同样这个方案也可以使用router的动态化，不过下篇见啦。

我是键盘钢琴家，一个把键盘当作钢琴使用的程序员。富有节奏的键盘敲击声真是悦耳吖。