Question

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

有没有一种方法，而无需使用开关或将字符串映射到组件，这是我目前能够做到的。

我尝试过此方法，但尽管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

有没有一种方法，而无需使用开关或将字符串映射到组件

无法实现，因为该框架无法将组件函数名称与组件相关联。

应该有一个将组件映射到其名称的映射，例如：

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的属性在缩小过程中被破坏，因此无法依赖。

React-使用字符串引用组件

3 个答案: