Имя динамического компонента в ReactJS
Я импортирую шесть разных значков игральных костей с помощью 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" />
Которая будет использовать значок FaDiceFour, который я импортировал из react-icons
Однако мне это не кажется идеальной ситуацией. Что мне действительно хотелось бы сделать, так это сделать имя компонента динамическим. В конце концов, каждый компонент имеет в основном одно и то же точное имя - только с другим номером.
По сути, я хочу примерно следующее:
// Dice.js
const function Dice() {
<Dice{num} />
}
export default Dice
// other file
import Dice from './Dice'
<Dice num = "Four" />
Я знаю, что это не работает, но я пытаюсь донести эту идею. Мне нужен способ использовать значение свойства из свойства num и использовать его для динамической генерации имени компонента (вместо того, чтобы выполнять ряд условных проверок, которые у меня есть сейчас).
Мне интересно, есть ли способ сделать это с помощью реакции. То есть, есть ли способ сделать имя компонента динамическим в зависимости от значения, переданного в опору этого компонента? Если да, то как?
Спасибо.
И вы определяете свой Dice как выражение функции и одновременно используете const.
@fortunee Я написал вопрос по памяти и поэтому допустил несколько опечаток. Я деструктурирую опору num, и нет дублирования как const, так и function. Это были просто опечатки с моей стороны (я обновил свой вопрос, чтобы удалить эти опечатки). Суть моего вопроса заключается в том, могу ли я заменить шесть условных проверок значения опоры num одной строкой кода, которая будет отображать правильный компонент значка в зависимости от значения, переданного опоре num.
Ответы 1
Я думаю, вы ищете способ сделать Dice презентационным компонентом, который принимает реквизиты (например, num) и отображает любые из этих значков React на основе значения num:
Ваша функция 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
На самом деле это была просто опечатка с моей стороны, которую я только что исправил. Я не собирался исключать {num} из аргументов в пользу компонента Dice. Я хочу заменить все аргументы num === "x" всего одной строкой кода, которая отображает нужный компонент в зависимости от того, какая опора передана. Представьте, что у меня было 1000 различных вариантов, а не всего шесть. Я бы не хотел писать 1000 различных условных проверок.
Разве вы не должны разрушать
numиз props в первой функции Dice выше?