- 基本
ReactDOM.render(<h3>h3</h3>, document.getElementById('app'))
- 变量
let a=10;
ReactDOM.render( <h3>{a}</h3>, document.getElementById('app'))
- 变量计算
let a=10;
ReactDOM.render(<h3>{a+2}</h3>, document.getElementById('app'))
- 字符串
let a=10,str="你好";
ReactDOM.render(<h3>
{a+2}
<hr/>
{str}
</h3>, document.getElementById('app'))
- 布尔
let a=10,str="你好",boo=true;
ReactDOM.render(<h3>
{a+2}
<hr/>
{str}
<hr/>
{boo.toString()}
</h3>, document.getElementById('app'))
- 三元表达式
let a=10,str="你好",boo=true;
ReactDOM.render(<h3>
{a+2}
<hr/>
{str}
<hr/>
{boo? '条件为真' : '条件为假'}
</h3>, document.getElementById('app'))
- 属性绑定
let title="999";
ReactDOM.render(<h3>
<p title={title}>ddd</p>
</h3>, document.getElementById('app'))
- 元素绑定
const h5=<h5>nihao</h5>
ReactDOM.render(<h3>
{h5}
</h3>, document.getElementById('app'))
- 元素数组绑定
const arr=[
<h3>这是h3</h3>,
<h4>这是h4</h4>,
<h5>这是h5</h5>,
]
ReactDOM.render(<h3>
{arr}
</h3>, document.getElementById('app'))
- 将普通字符串数组转换为jsx数组,并渲染到页面上
const arrStr=['nihao','nibuhao','nihao2','nibuhao2']
// 定义一个空数组
const nameArr=[]
arrStr.forEach((item)=>{
const temp= <h5>{item}</h5>
nameArr.push(temp)
})
ReactDOM.render(<h3>
{nameArr}
</h3>, document.getElementById('app'))
const arrStr=['nihao','nibuhao','nihao2','nibuhao2']
ReactDOM.render(<h3>
{arrStr.map(item => <h5>{item}</h5>)}
</h3>, document.getElementById('app'))
const arrStr=['nihao','nibuhao','nihao2','nibuhao2']
ReactDOM.render(<h3>
{arrStr.map((item)=> {
return <h5>{item}</h5>
})}
</h3>, document.getElementById('app'))
- 元素中用class属性,必须用className代替class;label标签中for属性必须用htmlFor代替for;标签必须成对出现(双标签) 或者 单标签必须自闭合
- 在jsx创建DOM的时候,所有的节点必须有唯一的根元素进行包裹
- 在jsx中写注释:推荐使用
{/* 这是注释 */}