计算机做网站,舟山建设信息港,国外有哪些做建筑材料的网站,广州17做网站一、认识JSX 这段element变量的声明右侧赋值的标签语法是什么呢#xff1f;
它不是一段字符串#xff08;因为没有使用引号包裹#xff09;#xff0c;它看起来是一段HTML原生#xff0c;但是我们能在js中直接给一个变量赋值html吗#xff1f;其实是不可以的#xff0c…一、认识JSX 这段element变量的声明右侧赋值的标签语法是什么呢
它不是一段字符串因为没有使用引号包裹它看起来是一段HTML原生但是我们能在js中直接给一个变量赋值html吗其实是不可以的如果我们讲 type“text/babel” 去除掉那么就会出现语法错误它到底是什么呢其实它是一段jsx的语法
JSX是什么
JSX是一种JavaScript的语法扩展eXtension也在很多地方称之为JavaScript XML因为看起就是一段XML语法它用于描述我们的UI界面并且其完成可以和JavaScript融合在一起使用它不同于Vue中的模块语法你不需要专门学习模块语法中的一些指令比如v-for、v-if、v-else、v-bind
为什么React选择了JSX
React认为渲染逻辑本质上与其他UI逻辑存在内在耦合
比如UI需要绑定事件button、a原生等等比如UI中需要展示数据状态在某些状态发生改变时又需要改变UI n 他们之间是密不可分所以React没有讲标记分离到不同的文件中而是将它们组合到了一起这个地方就是组件 Component我们只需要知道JSX其实是嵌入到JavaScript中的一种结构语法
JSX的书写规范
JSX的顶层只能有一个根元素所以我们很多时候会在外层包裹一个div原生或者使用后面我们学习的Fragment为了方便阅读我们通常在jsx的外层包裹一个小括号()这样可以方便阅读并且jsx可以进行换行书写JSX中的标签可以是单标签也可以是双标签 注意如果是单标签必须以/结尾
二、JSX的使用
jsx中的注释 JSX嵌入变量 情况一当变量是Number、String、Array类型时可以直接显示 情况二当变量是null、undefined、Boolean类型时内容为空 如果希望可以显示null、undefined、Boolean那么需要转成字符串 转换的方式有很多比如toString方法、和空字符串拼接String(变量)等方式 情况三对象类型不能作为子元素not valid as a React child
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapp/divscript src../react/react.development.js/scriptscript src../react/react-dom.development.js/scriptscript src../react/babel.min.js/scriptscript typetext/babelclass App extends React.Component {constructor(props) {super(props);this.state {// 1.在{}中可以正常显示显示的内容name: why, // Stringage: 18, // Numbernames: [abc, cba, nba], // Array// 2.在{}中不能显示(忽略)test1: null, // nulltest2: undefined, // undefinedtest3: true, // Booleanflag: true,// 3.对象不能作为jsx的子类// friend: {// name: kobe,// age: 40// }}}render() {return (divh2{this.state.name}/h2h2{this.state.age}/h2h2{this.state.names}/h2h2{this.state.test1 }/h2h2{this.state.test2 }/h2h2{this.state.test3.toString()}/h2h2{this.state.flag ? 你好啊: null}/h2h2{this.state.friend}/h2/div)}}ReactDOM.render(App/, document.getElementById(app));/script/body
/htmlJSX嵌入表达式
运算表达式三元运算符执行一个函数
jsx绑定属性
比如元素都会有title属性比如img元素会有src属性比如a元素会有href属性比如元素可能需要绑定class比如原生使用内联样式style
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodydiv idapp/divdiv stylecolor: red; font-size: 30px;/divscript src../react/react.development.js/scriptscript src../react/react-dom.development.js/scriptscript src../react/babel.min.js/scriptscript typetext/babelfunction getSizeImage(imgUrl, size) {return imgUrl ?param${size}x${size}}class App extends React.Component {constructor(props) {super(props);this.state {title: 标题,imgUrl: http://p2.music.126.net/L8IDEWMk_6vyT0asSkPgXw/109951163990535633.jpg,link: http://www.baidu.com,active: true}}render() {const { title, imgUrl, link, active } this.state;return (div{/* 1.绑定普通属性 */}h2 title{title}我是标题/h2img src{getSizeImage(imgUrl, 140)} alt/a href{link} target_blank百度一下/a{/* 2.绑定class */}div classNamebox title我是div元素/divdiv className{box title (active ? active: )}我也是div元素/divlabel htmlFor/label{/* 3.绑定style */}div style{{color: red, fontSize: 50px}}我是div,绑定style属性/div/div)}}ReactDOM.render(App /, document.getElementById(app));/script
/body/html三、React事件绑定
如果原生DOM原生有一个监听事件我们可以如何操作呢 方式一获取DOM原生添加监听事件
方式二在HTML原生中直接绑定onclick
在React中是如何操作呢 我们来实现一下React中的事件监听这里主要有两点不同:
React 事件的命名采用小驼峰式camelCase而不是纯小写。 例如原生中的onclickbtnClick在React中需要写成onClick{btnClick}我们需要通过{}传入一个事件处理函数这个函数会在事件发生时被执行
在事件执行后我们可能需要获取当前类的对象中相关的属性这个时候需要用到this如果我们这里直接打印this也会发现它是一个undefined。
为什么是undefined呢 原因是btnClick函数并不是我们主动调用的而且当button按钮被点击时React内部调用了btnClick函数而它内部调用时并不知道要如何绑定正确的this
如何解决this的问题呢 方案一bind给btnClick显式绑定this
方案二定义函数时使用箭头函数使用 ES6 class fields 语法
方案三事件监听时传入箭头函数推荐
四、事件参数传递 在执行事件函数时有可能我们需要获取一些参数信息比如event对象、其他参数 情况一获取event对象
很多时候我们需要拿到event对象来做一些事情比如阻止默认行为假如我们用不到this那么直接传入函数就可以获取到event对象
情况二获取更多参数
有更多参数时我们最好的方式就是传入一个箭头函数主动执行的事件函数并且传入相关的其他参数 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodydiv idapp/divbutton idbtn原生/buttonscript src../react/react.development.js/scriptscript src../react/react-dom.development.js/scriptscript src../react/babel.min.js/scriptscript typetext/babeldocument.getElementById(btn).addEventListener(click, function (event) {console.log(event);})class App extends React.Component {constructor(props) {super(props)this.state {movies: [流浪地球, 温暖的抱抱, 盗梦空间]}this.btnClick this.btnClick.bind(this)}render() {return (divbutton onClick{this.btnClick}按钮/buttonul{this.state.movies.map((item, index, arr) {return (li classNameitemonClick{(event) {this.liClick(item, index, event)}} key{index}{item}/li)})}/ul/div)}btnClick(event) {console.log(event);console.log(按钮发生点击, this);}liClick(item, index, event) {console.log(li发生了点击, item, index, event);}}ReactDOM.render(App /, document.getElementById(app))/script
/body/html
