是否可以将 react jsx 与非 jsx 组件混合使用？答案

【问题标题】：is it possible to mix react jsx with non jsx components?是否可以将 react jsx 与非 jsx 组件混合使用？
【发布时间】：2017-06-30 15:53:23
【问题描述】：

所以我现在的问题是，如果我有一个 JSX 父组件，但我需要包含一个 html 标记，例如 <i class="fa fa-window-maximize" aria-hidden="true"></i>，我认为 React JSX 不支持它（如果我是，请纠正我错误）我可以混合使用 jsx 和非 jsx 组件吗？我个人更喜欢 JSX，没有它真的没有做过任何工作，所以我不想偏离这个，除非我必须这样做。

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

【问题讨论】：

JSX 可以处理 html 标签。但在您的示例中，您必须将 class 更改为 className。
哦哈哈我不敢相信我没有看到我认为它无法处理斜体标签。这解决了我的问题谢谢。有时你只需要另一双眼睛。

标签： javascript html reactjs jsx

【解决方案1】：

您可以随意混合 JSX 和非 JSX（HTML！）！例如：

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

如果要设置元素的样式，则必须使用 className 而不是 class。所以你的 i 标签必须是这样的

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

【讨论】：

我有一个后续问题。如何将 JSX 与 React.createElement() 函数混合使用？

【解决方案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>

【讨论】：