/**
* 01.jsx 本身是一个表达式二
* 02.jsx 添加属性
* 字符串属性,直接双引号包裹
* 动态属性,
* 03.jsx 添加子元素
* 04.jsx 返回值只能有一个父元素
* 05.jsx 使用单标签时需要语法关闭 否则报错
*
*/
const name=<div>jsx</div>
const age=100
function App() {
return (
<div>
{name}
<p title="添加属性">添加属性</p>
<p title={age}>添加动态属性</p>
</div>
);
}
/**
*1.JSX可以看做是js语言的扩展 既不是字符串也不是HTML
*2.JSX具备了js所有的功能,同时还可以转化为HTML 在界面上进行展示
*
*--动态显示数据 {}
*--调用方法:自定义+语言内置
*--支持表达式,不支持if/else,支持三元表达式
*--模板字符串
*--注释
*--对象
*
*/
const name='jsx'
const flag=false
const obj={
name:'jsx',
age:100
}
function sayHello(){
return '大家好'
}
function App() {
return (
<div>
<p>{name}</p>
<p>name</p>
<p>{sayHello()}</p>
<p>{Math.random()}</p>
<p>{1+2+3}</p>
<p>{ flag ?'登录':'注册'}</p>
<p>{`hello ${name}`}</p>
<p>123456{/* 注释的内容 */}</p>
<p>{JSON.stringify(obj)}</p>
</div>
);
}
export default App;
/**
*jsx 事件操作
*01.事件绑定 驼峰命名直接添加
*02.事件监听传参
一、利用箭头函数内部调用事件监听的时候传递实参,
二、利用bind方法返回一个新的函数在事件调用时可以传参
*03.获取事件对象
一、默认情况下不需要接收参数,且直接执行此时第一个参数就是事件对象 ev
二、利用箭头函数进行事件监听的时候,通过箭头函数将ev 传递给事件监听函数进行使用
三、利用bind方法执行时如果有传参那么最后一个参数默认接收到的就是ev
*/
const handler=function(){
console.log('事件监听执行了')
}
const handler2=function(a,b){
console.log(a,b)
}
const handler3=function(a,b,ev){
console.log(a,b)
console.log(ev)
}
function App() {
return (
<div>
<button onClick={handler}>点击触发事件</button>
<button onClick={()=>handler2(1,2)}>点击触发事件2</button>
<button onClick={handler2.bind(null,100,200)}>点击触发绑定事件事件</button>
<button onClick={handler3}>点击获取事件对象</button>
<button onClick={(ev)=>{handler3(ev)}}>点击传递事件对象</button>
<button onClick={handler3.bind(null,10,20)}>点击传递事件对象</button>
</div>
);
}
export default App;