reactjs - 将内联 SVG 作为 React 组件 prop 传递

Question

是否可以将内联 SVG 作为组件属性(而不是作为子组件)传递。我尝试了如下方法，但不起作用:

 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} />);
}