javascript - 将反应组件元素称为变量

Question

是否可以调用内部带有变量的 React 组件元素？

    import React from "react"

    /*React functional component*/

    function someName() {

      const someVar = "componentName"; //the name of the called component

      return(
        <{someVar}/>
      )
    }

    export default someName;

useState我尝试在路由器中实现这一点，并使用获取的数据动态更改文件名（站点）（在元素中） 。

我愿意接受各种帮助:)

标签： javascriptreactjsjsx

Answer 1

没有直接的方法可以做到这一点，但您可以使用这种方法。

import ComponentA from '...path';
import ComponentB from '...path';
...

const components = {
  componentA: ComponentA,
  componentB: ComponentB,
  ...
}

...
function App(props) {
    const TargetComponent = components[props.componentName];
    return <TargetComponent />;
}