我有這個代碼...
import React from 'react';
import Fade from 'react-reveal/Fade';
import { Novice } from '../../../Icons/Novice';
import { Apprentice } from '../../../Icons/Apprentice';
import { Explorer } from '../../../Icons/Explorer';
import { Advocate } from '../../../Icons/Advocate';
import { Profesional } from '../../../Icons/Profesional';
import { Ambassador } from '../../../Icons/Ambassador';
export const ProfileType = (props) => {
const {
label = 'Apprentice',
} = props;
return (
<Fade top delay={2100}>
<div className="profile-card__work-type">
{
/* {label === 'Novice' && <Novice />}
{label === 'Apprentice' && <Apprentice />}
{label === 'Explorer' && <Explorer />}
{label === 'Advocate' && <Advocate />}
{label === 'Profesional' && <Profesional />}
{label === 'Ambassador' && <Ambassador />} */
}
{ `< ${label} />` }
<span className="profile-card__work-type-text">
{' '}
{label}
</span>
</div>
</Fade>
);
};
我想使用 'label' 變數作為我的組件的名稱，我正在嘗試使用字串插值來像這樣使用它，{ `< ${label} />` }但它只是將字串 < Novice/> 列印到螢屏上。
如何使用標簽變數作為組件的名稱而不是幾行條件？
最好的祝福，尼古拉斯
uj5u.com熱心網友回復：
使用物件來存盤您的組件...
const obj = {
Novice: <Novice />,
Apprentice: <Apprentice />,
Explorer: <Explorer />,
Advocate: <Advocate />,
Profesional: <Profesional />,
Ambassador: <Ambassador />
};
然后使用標簽訪問物件。
{obj[label]}
uj5u.com熱心網友回復：
< ${label} />如果你真的想這樣做，你不能只是把它作為一個組件來評估，你必須dangerouslySetInnerHTML在 a<div/>或其他東西上使用prop并給它一個有效的 html 字串。但正如道具的名稱所暗示的那樣，考慮到遠程代碼執行攻擊的可能性，它很危險。
解決這個問題的另一種方法，可能是最好的方法，就像另一個答案建議的那樣，將您的組件放在一個陣列中或作為物件的屬性，并通過陣列中組件的索引或物件屬性的鍵來訪問它們.
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/359751.html
標籤：javascript 反应 jsx