使用组件作为按钮 React答案

【问题标题】：Using component as a button React使用组件作为按钮 React
【发布时间】：2019-08-05 16:39:47
【问题描述】：

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

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

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

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

【问题讨论】：

您的 Button 组件是否来自库？如果它是你自己的组件，你不能在previous()旁边渲染它吗？
目前我正在使用rsuite按钮
好的。你试过在按钮里面写previous() <SVGIcon name="list" width={100}/>吗？
好吧，有点工作，按钮变得比它应该大 10 倍，或者只使用<SVGIcon name="list" width={100}/>，但我想我可以从那里想到一些东西。谢谢。
太棒了！不客气。

标签： javascript reactjs button svg

【解决方案1】：

您可能逃脱的最简单的解决方案是将SVGIcon 组件作为子组件呈现给Button。

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

【讨论】：