初步了解jsx语法
定义dom节点
在jsx中,可以直接定义一个dom节点,如:
const template = <div>我是一个div</div>
在此节点中,我们可以如html一样嵌套多个节点,如:
const template = <div><p>我是div下面的p</p><span>我是div下面的span</span></div>
需要注意的是,定义一个dom必须要有一个根节点,如:const template = <p>我是p</p><span>我是span</span>
这样定义是错误的
为了美观,我们也可以加上括号,提高我们代码的可读性,如下:
const template = ( <div> <p>我是div下面的p</p> <span>我是div下面的span</span> </div> )
绑定数据
在定义的dom节点中,我们可以用{}来绑定我们所需要的数据,其中可以写入js表达式和html标签,如:
let user = { name: 'tachmiao', birthDate: 1994 }, area = '上海'; const template = ( <div> <h1>姓名:{user.name}</h1> <p>年龄:{2019 - user.birthDate}</p> <p>地区:{area}</p> {<div>我是div</div>} </div> )
使用条件渲染绑定数据
-
可以使用函数
function showFun(num) { return <p>当前数字为{num}</p> } const template = ( <div> {showFun(12)} </div> )
-
三目运算符
let name = 'tachmiao' const template = ( <div> {name?name:'无名氏'} </div> )
-
逻辑运算符
let name = 'tachmiao' const template = ( <div> {false||name} </div> )
绑定属性
设置属性时,可以直接写在dom中,但是要注意的是,属性名遵循js语法,如class需要写成className,更多可以查看 官方文档
let myId = 'a' const template = ( <div id="app"> <p className="p">我是div下面的p</p> //通过{}来绑定属性 <span id={myId}>我是div下面的span</span> </div> )
绑定事件
我们可以定义一个点击方法,通过onClick={}来绑定dom的点击事件
function clickSpan() { console.log('点击了span') } const template = ( <div id="app"> <span onClick={clickSpan}>点击</span> </div> )