javascript - 使用组件作为按钮 React

Question

我的 React 应用程序中有按钮，我想使用 SVG 将图像添加到它们中，而且我发现我的 SVG 文件需要一个单独的组件，所以我遵循了这个 link并让自己成为<SVGIcon />组件。

我尝试将其添加到 button但它似乎不起作用。我尝试通过添加 onClick 将其用作按钮到 <SVGIcon /> ，但随后按钮消失了。

如何使用我的 SVG 组件但保留按钮属性？

<SVGIcon  name="list " width={100}/>
<Button onClick={() => this.playPreviousVideo()} disabled={this.state.activeKey === 1} className="mr-3">
    previous()
</Button>

Answer 1

最简单的解决方案是将 SVGIcon 组件作为 Button 的子组件呈现。

<Button
  onClick={() => this.playPreviousVideo()}
  disabled={this.state.activeKey === 1}
  className="mr-3"
>
  previous() <SVGIcon name="list" width={100} />
</Button>