ReactJS 中的动态组件名称

Question

我正在使用react-icons 导入六个不同的骰子图标，如下所示：

import {
  FaDiceOne as DiceOne,
  FaDiceTwo as DiceTwo,
  FaDiceThree as DiceThree,
  FaDiceFour as DiceFour,
  FaDiceFive as DiceFive,
  FaDiceSix as DiceSix,
} from "react-icons/fa";

目前我在Dice 组件中使用这六个组件如下：

function Dice({num}) {
<div>
 {num === 'one' && <DiceOne />}
 {num === 'two' && <DiceTwo />}
 {num === 'three' && <DiceThree />}
 {num === 'four' && <DiceFour />}
 {num === 'five' && <DiceFive />}
 {num === 'six' && <DiceSix />}
</div>

}

export default Dice

这行得通——意思是，我可以做到以下几点：

import Dice from "./Dice";

...

<Dice num="four" />

这将使用我从react-icons 导入的FaDiceFour 图标

但是，在我看来，这并不是理想的情况。我真正想做的是使组件名称动态化。毕竟，每个组件的名称基本相同——只是编号不同。

本质上，我想要的是这样的：

// Dice.js
const function Dice() {

 <Dice{num} />

}

export default Dice

// other file
import Dice from './Dice'

<Dice num="Four" />

现在，我知道这行不通，但这是我试图传达的想法。我想要的是一种使用来自num prop 的 prop 值并使用它来动态生成组件名称的方法（然后必须像我目前拥有的那样进行一些条件检查）。

我想知道是否有办法通过反应来做到这一点。即，有没有办法根据传递给该组件的 prop 的值使组件名称动态化？如果有，怎么做？

谢谢。

Answer 1

我认为您正在寻找一种使 Dice 成为呈现组件的方法，该组件接受道具（即：num）并根据 num 的值呈现任何这些 React 图标：

您的 Dice 函数应该如下所示。

const Dice = ({ num }) => {
  return (
    <>
      {num === 'one' && <DiceOne />}
      {num === 'two' && <DiceTwo />}
      {num === 'three' && <DiceThree />}
      {num === 'four' && <DiceFour />}
      {num === 'five' && <DiceFive />}
      {num === 'six' && <DiceSix />}
    </>
  )
}

export default Dice; // if it's a different file

像这样使用它：

<Dice num={num} />

在此处查看工作示例https://stackblitz.com/edit/react-kwg3p9