如何在 ReactJS 中將 fontawesome 渲染為按鈕

Question

我正在嘗試使用以下代碼段呈現帶有fontawesome圖標的按鈕：

<div className="form-group  col-md-2">
   <input type="button" className="btn btn-default">
   <i className="fas fa-plus-circle"></i> add
   </input>
</div>

但我不斷收到此錯誤：

input 是一個空元素標簽，不能有children元素，也不能使用dangerouslySetInnerHTML 。

正確的做法是什么？

Answer 1

在 React 中， <input />不能渲染任何子元素。 相反，請使用button 。

<div className="form-group col-md-2">
    <button type="button" className="btn btn-default">
        <i className="fas fa-plus-circle"></i> add
    </button>
</div>

這是Sandbox 中的一個示例。

Answer 2

不幸的是，錯誤消息指出input元素，您無法在其中包含任何元素。

一種可能的解決方案是使用button而不是input元素。 通過添加CSS類並設置content屬性，如下例所示，閱讀文檔：

content 屬性與::before和::after偽元素一起使用，以插入生成的內容。

 .icon-content:after { content: '🔥 add'; }

 <button class="btn btn-default icon-content" />

希望這可以幫助！