目前我匯入這樣的圖示
//index.ts file for svgs
import BackArrow from './back-arrow.svg'
export {
BackArrow,
...
}
在一個組件中，我現在可以輕松匯入和使用它
import { BackArrow } from '../../assets/images'
....
return <BackArrow />
現在我嘗試制作一個（子）組件，它應該顯示兩個按鈕和一個文本，它們由父組件傳遞。
父母像這樣使用孩子：
<Button
label='hi'
iconLeft={BackIcon}
buttonTheme={BUTTONS_THEME.dark}
/>
孩子長這樣：
//Styled components (ThemedButton, Icon, Label)
const Button = ({ label, iconLeft, iconRight, theme}) => {
<ThemedButton>
{iconLeft && <Icon theme={theme} xml={iconLeft} />}
<Label theme={theme}>{label}</Label>
{iconRight && <Icon theme={theme} xml={iconRight} />}
</ThemedButton>
這一切都很好，如果在父組件中我像這樣匯入svg：
import BackArrow from '../../assets/images/back-arrow.svg'
但我想使用“正常”方式匯入它，就像我在應用程式中的其他任何地方一樣，像這樣：import { BackArrow } from '../../assets/images'
有人知道如何解決這個問題嗎？我試圖通過這樣的圖示<Button leftIcon={<BackArrow />}... />，但我無法讓它作業，因為我不知道如何在孩子中使用和設定圖示的樣式。
uj5u.com熱心網友回復：
我不知道您在構建程序中使用了什么。但這可能是因為您用于加載 svg 的加載器。如果您像這樣匯入您的 svg：import BackArrow from '../../assets/images/back-arrow.svg'它可能會將其加載為 dataURL。如果你像這樣匯入你的 svg：import { BackArrow } from '../../assets/images'它作為反應組件匯入。因此，您不能將其用作xml圖示的道具。
uj5u.com熱心網友回復：
我認為您正在嘗試做的是將您BackArrow的孩子用作<BackArrow />
以下方法適用于 CRA 應用程式，您可以在其中匯入svg為ReactComponent
我通過遵循這種方法解決了類似的問題。
進口是
import { BackArrow } from './back-arrow.svg
繼續將其傳遞給孩子
<Button
label='hi'
iconLeft={BackIcon}
buttonTheme={BUTTONS_THEME.dark}
/>
但是，現在孩子不要破壞你的道具，
const Button = (props) => {
<ThemedButton>
{props.iconLeft && <props.iconLeft ... />}
<Label theme={props.theme}>{props.label}</Label>
{props.iconRight && <props.iconRight ... />}
</ThemedButton>
編輯：
在子組件中，當你擁有<props.iconLeft ... />then 時，這相當于<BackArrow />所以現在你可以自由地設定它的樣式，基本上就像你在父組件中一樣對待它<BackArrow />。破壞你在孩子身上的道具在這里并不奏效。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/408294.html
標籤：
上一篇：根據布林值有條件地將兩個不同的陣列映射到一個React組件
下一篇：將物件作為道具傳遞給組件