Question

假设我有：

import MyComponent from "../somewhere"

我可以通过以下方式创建它的实例：

<MyComponent myprops={myprops} />

但是我可以从MyComponent以编程方式创建一个并添加道具吗？

例如，我有一个组件引用列表：

import comp1 from "somewhere"
import comp2 from "somewhere"
import comp3 from "somewhere"

var myComponents = [
    comp1, comp2, comp3
];

现在我必须把其中一个放在视图中：

var randomComponent = myComponents[Math.random() * 3 | 0];

// render
render(){
    return randomComponent; // this doesn't work and certain props have to be added
}

有没有办法避免做以下事情并实现相同的目标？

var myComponents = [
    <comp1 props=... />, <comp2 props=... />, <comp3 props=... />
];

Answer 1

您可以执行以下操作：

var RandomComponent = myComponents[Math.random() * 3 | 0];

render() {
    return <RandomComponent props={foobar} />;
}

上面的内容在React Docs进行了演示，其中提到了以下内容：

您不能将通用表达式用作React元素类型。如果您确实想使用通用表达式来指示元素的类型，首先将其分配给大写变量。（强调我的）

组件名称必须大写的原因是因为如果没有，它将被视为内置组件（DOM组件）。这是有效的，因为它只是转化为：

React.createElement(RandomComponent, { props: foobar });

RandomComponent仍指随机选择的组件。如果randomComponent 不大写，那么您可以在没有JSX的情况下执行此操作：

React.createElement(randomComponent, { props: foobar });

你将无法用JSX做到这一点，因为randomComponent是小写的，并且偶然会被转化为：

React.createElement("randomComponent", { props: foobar });

由于"randomComponent"未引用randomComponent，因此存在问题。

Answer 2

请参阅Create react component dynamically

var component = myComponents[Math.random()*3 |0];
return React.createElement(component, props);

Answer 3

我愿意分享。对于导入的svg文件，我有一个非常特定的用例，但我相信这也适用于组件。我希望有一个按钮组件，可以在给定道具类型的情况下加载不同的svg图标。

import LightBulb from '../my-icons/Lightbulb.svg';

const ICON_TYPES = {
  LightBulb: 'LightBulb',
};

const ICON_TYPE_FILES = {
  [ICON_TYPES.LightBulb]: LightBulb,
};

export default function IconButton({iconType}) {
  const IconComponent = ICON_TYPE_FILES[iconType];
  return (
    <Icon>
      <IconComponent />
    </Icon>
   );
};
IconButton.ICON_TYPES = ICON_TYPES

使用组件：

<IconButton
  iconType={IconButton.ICON_TYPES.LightBulb}
/>

如何通过引用创建组件？

3 个答案: