Question

我不确定我尝试做的事情是否可行，或者是否有更好的方法来实现我的目标。任何见解都会非常有用。

上下文

我有一个目录，里面装满了内嵌SVG的组件
这些组件收集在IconsIndex.js文件中，并按原样导出：

export { default as Rocket } from "./Rocket";

我正在导入索引，以便从任何给定组件访问我的图标库：

import * as Icon from "./icons/IconsIndex";

这使我基本上可以：<Icon.Rocket />完美呈现SVG组件。

我想做的是能够让<Icon />组件从父组件变得更加动态。

例如：

class ResourceBlock extends React.Component {
  render() {
    return (
      <BlockContainer>
        <BlockIcon>
          <Icon.Rocket />
        </BlockIcon>
        <BlockTitle>{this.props.caption}</BlockTitle>
        <Button>{this.props.buttonText}</Button>
      </BlockContainer>
    );
  }
}

这将在调用Rocket组件的任何位置输出ResourceBlock图标。我希望能做的是这样的事情：

<ResourceBlock icon={Icon.Rocket} caption="Lorem..." buttonText="..." />

这可能吗？如何通过我们的图标实现这种灵活性？

关键是要尽可能地将SVG保持分离，因此将它们全部包装在一个额外的<Icon />组件中并不吸引人。

Answer 1

有点奇怪，但是in JSX if the node name is lowercase it will be translated as an html tag，而不是组件参考。因此，只需将您的图标属性分配给大写的本地const并以这种方式呈现：

class ResourceBlock extends React.Component {
  render() {
    const Icon = this.props.icon;
    return (
      <BlockContainer>
        <BlockIcon>
          <Icon />
        </BlockIcon>
        <BlockTitle>{this.props.caption}</BlockTitle>
        <Button>{this.props.buttonText}</Button>
      </BlockContainer>
    );
  }
}

就像你拥有它一样使用：

<ResourceBlock icon={Icon.Rocket} caption="Lorem..." buttonText="..." />

Answer 2

不确定

<ResourceBlock icon={<Icon.Rocket />} caption="Lorem..." buttonText="..." />

class ResourceBlock extends React.Component {
  render() {
    return (
      <BlockContainer>
        <BlockIcon>
          {this.props.icon}
        </BlockIcon>
        <BlockTitle>{this.props.caption}</BlockTitle>
        <Button>{this.props.buttonText}</Button>
      </BlockContainer>
    );
  }
}

React：根据导入的组件列表渲染连接组件

上下文

2 个答案: