Reactjs 反应：通过它加载组件'；姓名

很简单，用户在文本框中键入组件的名称，我应该将其呈现到一个div中。该组件可以在我的节点模块文件夹中找到

谢谢，

---

拉维

我想你可以这样做：

import React, { useState } from "react"
// here, import all components that the user could choose (I personnally did it 
// only with Loader

import Loader from "components/common/Loader"

const Test = () => {
  const [userComponent, setUserComponent] = useState(null)
  const [componentName, setComponentName] = useState("")

// here, in componentAssociator, the key must should be the name of the component
// and the value is the component itself
  const componentAssociator = { Loader: Loader }

  const handleComponentChange = (e) => {
    setComponentName(e.target.value)
  }

  const loadComponent = () => {
    setUserComponent(componentAssociator[componentName])
  }

  return (
    <>
      <input value={componentName} onChange={handleComponentChange} />
      <button onClick={loadComponent}>OK</button>
      <div>{userComponent}</div>
    </>
  )
}

export default Test

import React，{useState}来自“React”
//在这里，导入用户可以选择的所有组件（我亲自做的）
//仅使用加载器
从“组件/通用/加载程序”导入加载程序
常数测试=（）=>{
常量[userComponent，setUserComponent]=useState（null）
常量[componentName，setComponentName]=useState（“”）
//这里，在componentAssociator中，键必须是组件的名称
//值就是组件本身
常量componentAssociator={Loader:Loader}
常量handleComponentChange=（e）=>{
setComponentName（例如target.value）
}
常量loadComponent=（）=>{
setUserComponent（componentAssociator[componentName]）
}
返回(
好啊
{userComponent}
)
}
导出默认测试

我希望它能帮助你