是否有可能混合反应jsx与非jsx组件？

所以我现在的问题是，如果我有一个父组件是JSX，但我需要包含一个HTML标记，如<i class="fa fa-window-maximize" aria-hidden="true"></i>，我相信这是不支持的反应JSX（纠正我，如果我错了）可以我将jsx和非jsx组件混合在一起怎么样？我个人更喜欢JSX，如果没有它，我真的不会做任何工作，所以我不想偏离这个，除非我必须这样做。是否有可能混合反应jsx与非jsx组件？

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

来源

2017-02-12 user3832583

JSX可以处理的HTML标签。但在你的例子中，你必须将'class'改成'className'。 – alecrobins

哦，哈哈我不敢相信我没有看到我认为它不能处理斜体标记。这解决了我的问题，谢谢。有时你只需要另一双眼睛。 – user3832583

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

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

如果你想样式的元素必须使用className代替class。所以，你的我的标签必须看起来像这样

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

来源

2017-02-12 17:42:34

心目中，这些“非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" />

是的，你也可以自定义它们混合反应的组分：

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

来源

2017-02-12 18:01:30

是否有可能混合反应jsx与非jsx组件？

回答

相关问题