Javascript 从上下文呈现变量样式的组件

嗨，我正在制作一个网站建设应用程序，它使用样式化的组件和表单将数据呈现到页面的各个部分。因此，我决定将所有样式化组件都作为默认导出，然后导入到上下文中，然后在表单打开时加载到表单中。然后，用户从“选择”菜单中获取所有可能要渲染的组件的映射，当选择一个选项时，字符串引用将组件数组向下过滤到调用的函数，然后添加所有其他数据，然后将其显示在屏幕上。启动时出现以下错误：“React.jsx:type无效--应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：。是否意外导出了jsx文本而不是组件？”

以下是所有部分：

BurgerMenu.js

import React, { useState, useRef } from "react";
import { ThemeProvider } from "styled-components";
import { useOnClickOutside } from "../../state/useOnClickOutside";
import { GlobalStyles } from "../../state/globals";
import { useTheme } from "../../state/useTheme";
import Hamburger from "./Hamburger";
import Menu from "./Menu";
const BurgerMenu = () => {
  const [open, setOpen] = useState(false);
  const node = useRef();
  useOnClickOutside(node, () => setOpen(false));
  const { theme } = useTheme();
  return (
    <ThemeProvider theme={theme}>
      <>
        <GlobalStyles />
        <div ref={node}>
          <Hamburger open={open} setOpen={setOpen} />
          <Menu open={open} setOpen={setOpen} />
        </div>
      </>
    </ThemeProvider>
  );
};
export default BurgerMenu;

站点表单（其中调用组件上下文）

const{components}=useComponentContext（）；
const[mount，setMount]=useState（“”）
setMount（e.target.value）}>
{components.map（（component）=>(
{component.name}
))}
{
转换器串至组件（安装）；
setTimeout（setLoaded（（prevState）=>！prevState），2000）}>
添加组件

函数转换器StringToComponent

const convertStringToComponent = (mount, compStyle) => {
    const ComponentName = components
      .filter((comp) => comp.name === mount)
      .map(({ func }) => func)[0];

    return (
      <ComponentName
        content={content}
        font={font}
        pallet={pallet}
        h={h}
        icon={icon}
        p={p}
        vid={vid}
        img={img}
        a={a}
        li={li}
        button={button}></ComponentName>
    );
  };

const VariableComponent = convertStringToComponent(mount);

const convertStringToComponent=（mount，compStyle）=>{
常量ComponentName=组件
.filter（（组件）=>组件名称===装载）
.map（（{func}）=>func）[0]；
返回(
);
};
const VariableComponent=convertStringToComponent（mount）；

然后在另一个组件中使用

 {loaded === true && <VariableComponent />}

{loaded==true&&}

---

任何帮助都会很好

问题在于如何使用convertStringToComponent的函数reeturn valaue

调用时，

convertStringToComponent

将返回一个

<ComponentName
    content={content}
    font={font}
    pallet={pallet}
    h={h}
    icon={icon}
    p={p}
    vid={vid}
    img={img}
    a={a}
    li={li}
    button={button}></ComponentName>

---

但是，还有一个问题，当您调用

convertStringToComponent

时，您不应该尝试将结果存储在变量中并将其导出，而是应该将其存储在实例状态并呈现它

构建代码的更好方法是

export const convertStringToComponent = (mount, compStyle) => {
    const ComponentName = components
      .filter((comp) => comp.name === mount)
      .map(({ func }) => func)[0];
    
    return  (otherProps) => (
      <ComponentName
        {...otherProps}
        content={content}
        font={font}
        pallet={pallet}
        h={h}
        icon={icon}
        p={p}
        vid={vid}
        img={img}
        a={a}
        li={li}
        button={button}></ComponentName>
    );
  };

export const convertStringToComponent=（mount，compStyle）=>{
常量ComponentName=组件
.filter（（组件）=>组件名称===装载）
.map（（{func}）=>func）[0]；
返回（其他道具）=>(
);
};

现在你可以像这样使用它了

const [VariableComponent, setVariableComponent] = useState(null);

<button
   className='btn primary btn-block'
   onClick={() => {
       const comp = convertStringToComponent(mount);
       setVariableComponent(comp);
       setTimeout(setLoaded((prevState) => !prevState),2000)}}>
              Add Component
</button>


{isLoaded && <VariableComponent />}

const[VariableComponent，setVariableComponent]=useState（null）；
{
常量组件=转换字符串到组件（安装）；
可设置变量组件（comp）；
setTimeout（setLoaded（（prevState）=>！prevState），2000）}>
添加组件
{已加载&&}

嘿，有一件事是有效的，那就是它不在JSX中，而是像您在VariableComponent的第一部分中一样。谢谢@MickeyGray为了使用

，您必须将

convertStringToComponent

的实现更改为我在回答中提到的内容，以便让您知道我直接复制并粘贴了您的第二个示例，并且在

{isLoaded&}

的VariableComponent中出现了一个错误，而非VariableComponent

{loaded === true && <VariableComponent />}

 {loaded === true && VariableComponent}

export const convertStringToComponent = (mount, compStyle) => {
    const ComponentName = components
      .filter((comp) => comp.name === mount)
      .map(({ func }) => func)[0];
    
    return  (otherProps) => (
      <ComponentName
        {...otherProps}
        content={content}
        font={font}
        pallet={pallet}
        h={h}
        icon={icon}
        p={p}
        vid={vid}
        img={img}
        a={a}
        li={li}
        button={button}></ComponentName>
    );
  };

const [VariableComponent, setVariableComponent] = useState(null);

<button
   className='btn primary btn-block'
   onClick={() => {
       const comp = convertStringToComponent(mount);
       setVariableComponent(comp);
       setTimeout(setLoaded((prevState) => !prevState),2000)}}>
              Add Component
</button>


{isLoaded && <VariableComponent />}