前端 - 请问如何基于字符串做到JSX呢？

Question

您好，请问下，我有一个字符串，如何用这个字符串作为JSX来使用呢？

const str = "AppComp"我想要得到这样的JSX：<AppComp/>

请问如何基于str这个字符串变量做到<AppComp/>?

---

更新1

因为其他地方已经定义了AppComp，所以直接引入，但是在这进行字符串创建JSX名称使用。

Answer 1

const str = "AppComp";
const Element = str;

function MyComponent() {
return <Element />;
}
或者：
const str = "AppComp";
const element = React.createElement(str, null);

function MyComponent() {
return element;
}
不知道是否可以

Answer 2

JSX 的解析是在编译期完成的，这意味着试图在运行时生成 JSX ，需要把编译器搬到运行时，技术上并非做不到，但是没有必要。
好在作为 JS 的超集，JSX 同样拥有 JS 的灵活性，像这种 string => JSX.Element 的需求可以这样实现：

function AppComp(){  return <>This is AppComp</>}const componentRecords = (() => {  const componentMap = new Map();  const errCompGen = (info) => () => <div style={{color: "red"}}>{info}</div>;  return (component) => {    if(typeof component === "string"){      return componentMap.get(component) || errCompGen(`渲染错误：${component}组件未注册`);    }    if(typeof component !== "function"){      return    }    componentMap.set(component.name, component);  }})();componentRecords(AppComp);  const strs = [    "AppComp",    "TestComp",    "AppComp",  ];  return <>  {    strs.map((i) => {      const I = componentRecords(i);      return<I/>    })  }  </>