是否可以將jsx與非jsx組件混合使用？

Question

所以我現在的問題是，如果我有一個JSX的父組件，但我需要包含一個html標簽，例如<i class="fa fa-window-maximize" aria-hidden="true"></i>我認為反應JSX不支持（糾正我，如果我錯了）我可以混合使用jsx和非jsx組件嗎？ 我個人更喜歡JSX而沒有真正做過任何工作，所以我不想偏離這個，除非我不得不這樣做。

<Parent>
   <Child>
      Mix non jsx code in here??
   </Child>
</Parent>

Answer 1

您可以根據需要混合使用JSX和非JSX（HTML！）！ 例如：

<div>
    <MyComponent>
        <input type="button>
    </MyComponent>
</div>

如果要為元素設置樣式，則必須使用className而不是class 。 所以你的i標簽必須如下所示

<i className="fa fa-window-maximize" aria-hidden="true"></i>

Answer 2

請記住，這些“非JSX”HTML元素實際上也是JSX元素，請查看JSX In Depth

<div className="sidebar" />

編譯為：

React.createElement(
  'div',
  {className: 'sidebar'},
  null
)

要在這些組件中包含類，您需要使用className而不是class ，如下所示：

<i className="fa fa-window-maximize" aria-hidden="true" />

是的，您還可以將它們與您的自定義React組件混合使用：

<MyComponent>
  <i className="fa fa-window-maximize" aria-hidden="true" />
</MyComponent>