將內聯SVG傳遞爲React組件prop

Question

是否可以將內聯SVG作爲組件prop（而不是組件子對象）傳遞。我嘗試用下面的方法，但不起作用：

mySvg1() { 
    return (<svg xmlns="... ></svg>); 
} 

render() { 
    <AnotherComponent icon={this.mySvg()} /> 
} 

Answer 1

是的，這是可能的。但首先你需要定義Icon組件。

// MySvgIcon.js 
function MySvgIcon() { 
    return (<svg xmlns="..."></svg>); 
} 

一旦你的組件，你需要定義的其他組件，並使用圖標如下：

// AnotherComponent.js 
function AnotherComponent({ Icon }) { 
    return (<div>A nice icon: <Icon /></div>); 
}  

而且你可以使用它們像這樣：

// OtherComponent.js 
function OtherComponent() { 
    return (<AnotherComponent Icon={MySvgIcon} />); 
}