React：基于 prop 的组件名称

Question

我正在尝试通过道具在 React 中加载组件。这是一个我想从父组件传递的图标。

仪表板（父级）：

import { Button } from './components';

function App() {
  return (
    <div className="app">
        <div className="app__nav">
            <Button icon="FiSun" />
            <Button icon="FiSun" />
        </div>
    </div>
  );
}

按钮（子）：

import React from 'react';
import * as Icon from "react-icons/fi";

import './button.scss';

function Button(props) {
    return(
        <button>
            // Something like this
            <Icon.props.icon />
        </button>
    )
}

不幸的是，我找不到简单的方法来完成这项工作，因为我不允许在组件名称中使用道具。

Answer 1

这是一个工作版本：

import * as Icons from "react-icons/fi";

function Button(props) {
  const Icon = Icons[props.icon];
  return <button><Icon/></button>;
}

我在stackblitz上添加了一个例子

Answer 2

我怀疑这是你想要的模式。

如果App 知道Button 应该呈现的组件的名称，那么您实际上并没有通过不传递组件引用本身来提供任何抽象。你也许可以让它通过这样的字符串工作，但我不建议走那条路。

相反，我会将组件引用传递给Button，如下所示：

import FiSun from '...';
...
<Button icon={FiSun} />

function Button(props) {
  const Icon = props.icon; // Alias as uppercase
  return(
    <button>
      <Icon />
    </button>
  )
}

或者，如果您只希望Button 组件了解可能的图标类型，我建议您使用普通条件而不是尝试动态创建 JSX 标记：

function Button(props) {
  function renderIcon() {
    if (props.icon == 'FiSun') {
      return <FiSun />;
    } // else etc
  }

  return(
    <button>
      {renderIcon()}
    </button>
  )
}

为了在保持允许组件用户传入任何可用图标名称的功能的同时提供一些稳定性，您可以执行以下操作：

function Button(props) {
  function renderIcon() {
    const I = Icon[props.icon];
    if (I) {
      return <I />;
    }
    // Icon is not valid, throw error or use fallback.
    if (in_development) {
      console.error('[Button]: Invalid prop `icon`. Icon '+props.icon+' does not exist.');
    }
    return <FallbackIcon />
  }

  return(
    <button>
      {renderIcon()}
    </button>
  )
}