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

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

* 组件动态化核心方案
* author: carry
* update: 2021/08/11 14:40
const 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的动态化，不过下篇见啦。

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