是否可以将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>