脚本宝典收集整理的这篇文章主要介绍了整理一下react的知识点2(持续更新),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
// 导入react和react-dom
import React from 'react'
import ReactDOM from 'react-dom'
// jsx创建元素
const list = <ul><li>html</li><li>js</li><li>css</li><ul>
// 渲染react元素
ReactDOM.render(list, document.getElementById('root'))
ReactDOM.render(
<div>
<h1>{1+1}</h1>
</div>
,
document.getElementById('root')
);
<h1>{i === 1 ? 'True!' : 'False'}</h1>
var myStyle = {
fontSize: 100,
color: '#FF0000'
};
ReactDOM.render(
<h1 style = {myStyle}>我的样式</h1>,
document.getElementById('root')
);
{/*注释...*/}
var arr = [
<h1>呵呵</h1>,
<h2>哈哈</h2>,
]
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('root')
)
注意事项:
1. 由于 JSX 就是 JavaScript,一些标识符像 class
和 for
不建议作为 XML 属性名。作为替代,React DOM 使用 className
和 htmlFor
来做对应的属性。
2. jsx必须要有一个根节点 (虚拟根节点 1.<></>2.
<React.Fragment> </React.Fragment> )
3. 单标签要闭合 (<input>
=== <input />
)
4. 换行建议使用( )包裹
5. 老版本(16.8)先引入react才能使用jsx (老版本中不引入就会报错React must be in scope when using JSX
)
以上是脚本宝典为你收集整理的整理一下react的知识点2(持续更新)全部内容,希望文章能够帮你解决整理一下react的知识点2(持续更新)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。