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

Question

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

const str = "AppComp"

我想要得到这样的JSX：
<AppComp/>

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

---

更新1

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

Answer 1

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/>
    })
  }
  </>

Answer 2

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

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

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