jsx及其语法.md
2019-05-11 本文已影响0人
时修七年
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.0.17/browser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0-alpha.3174632/cjs/react-dom.production.min.js"></script>
<body>
<div id="app"></div> // 需要一个根容器
<script type="text/babel">
let oApp = document.getElementById('app'); // react接管的根组件
ReactDom.render(<span keys='222'>hello world</span>,oApp)
//React.creatElement(''span",{keys:222},"hello world")
</script>
</body>
</html>
jsx 是通过js和xml实现的, 所以更偏向于js语言风格，有以下注意点
- jsx创建的组件，必须有且仅有一个父级
- 单标签必须闭合
- class要写成className
- label中for要写成htmlFor
空标签组件Fragement
dangerouslySetInnerHTML={{__html: item}}
{/* 注释 */}
jsx语法
jsx基本语法
ReactDOM
import React from 'react'
import ReactDOM from 'react-dom'
let content = <h1>jsx...</h1>
ReactDOM.render(jsx,document.getElementById('root'))
样式处理
// style样式要写成对象形式
let jsx = <div style={{fontSize: 14px;}}></div>
// 当是真实项目中还是使用className='jsx'
import './index.css'
数据逻辑处理
let name = 'Rosen'
let name = ['Rosen','Jack','xiaolong']
let flag = true
// 条件判断
let jsx = (
<div>
{/* 条件判断 */}
{
flag?<p>I am {name}</p>:<p> I am not {name}</p>
}
{/* 数组循环 */}
{
names.map((name,index)=><p key={index}>Hello I am {name}</p>)
}
</div>
)
