React - 使用字符串引用组件

Question

我需要使用与组件名称相同的字符串来调用组件。

有没有办法在不使用switch或将字符串映射到组件的情况下执行此操作，这是我目前能够做到的。

我尝试了这个，但它没有用，虽然这个article使用了类似的方法。

render() {
     let CompName = 'SelectComponent';
     return <CompName />
}

这只是一个例子。字符串（组件名称）将在配置文件中定义，该文件包含需要呈现的多个输入字段的属性。

谢谢。

Answer 1

您可以将字符串用于内置元素（div，span，...），但如果要使用自定义组件，则需要引用组件变量。

您可以将所有组件放在一个对象中，并在组件名称的帮助下获取组件变量。

例

function Foo() {
  return <div> Foo </div>;
}
function Bar() {
  return <div> Bar </div>;
}

const components = { Foo, Bar };

function App(props) {
  const { regularTag: RegularTag, componentTag } = props;
  const Component = components[componentTag];

  return (
    <div>
      <Component />
      <RegularTag> Baz </RegularTag>
    </div>
  );
}

ReactDOM.render(
  <App componentTag={"Foo"} regularTag={"div"} />,
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

Answer 2

我认为最接近的是通过字符串调用对象属性

const Component1 = ()=><h1>This is component 1</h1>
const Component2 = () => <h1>This is component 2</h1>

const obj = {
 component1: <Component1 />,
 component2: <Component2 />
}

render(obj["component2"], document.getElementById("app"));

Answer 3

有没有办法在不使用switch或将字符串映射到组件的情况下执行此操作

没有办法，因为框架没有办法将组件功能名称与组件相关联。

应该有一个地图将组件映射到他们的名字，例如：

import Foo from './Foo';
import Bar from './Bar';

const componentsMap = { Foo, Bar };

...

let CompName = 'Foo';
return <componentsMap[CompName] />

可以使用装饰器改进工作流程，尤其是对于类组件：

const componentsMap = {};

const mapComponent = name => Comp => {
  name = name || Comp.displayName;
  if (!name)
    throw new Error('no comp name');

  return componentsMap[name] = Comp;
}

...

@mapComponent()
class Foo extends Component {
  static displayName = 'Foo';
  ...
}

const Bar = mapComponent('Bar')(props => ...);

组件名称可以移动到静态属性，如displayName，但无法避免，因为函数name属性在缩小期间被破坏而无法依赖。