Question

所以我现在的问题是，如果我有一个JSX的父组件，但是我需要包含一个html标签，例如curl -k -v -H "Content-Type:application/json" -X POST -d '{"session":{"password":"12345678","email":"example@zapserver.com"}}' https://example.com/api/sessions/，我相信反应JSX不支持（如果我是正确的话）我错了）我可以混合使用jsx和非jsx组件吗？我个人更喜欢JSX而且没有真正完成任何工作，所以除非必要，否则我不想偏离这个。

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

Answer 1

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

<!-- <resource-ref>
    <res-ref-name>jdbc/test</res-ref-name>
    <res-type>javax.sql.ConnectionPoolDataSource</res-type>
    <res-auth>Container</res-auth>
    <res-sharing-scope>Shareable</res-sharing-scope>
</resource-ref> -->

如果要为元素设置样式，则必须使用<div> <MyComponent> <input type="button> </MyComponent> </div>而不是className。所以你的i标签必须看起来像这样

class

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>

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

2 个答案: