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

Answer 2

尝试如图所示将SVG导入为React组件

ClassUnderTest

请确保道具名称使用大写字母，否则，如果您在AnotherComponent中分解道具，则道具名称将不起作用。但是，如果您不进行销毁，则props.anyNameWouldWork（无需大写）。