React笔记_(2)_react语法1
这一节内容主要以了解为主。
渐渐的体会react的语法和其特性。
① htmlAndJs 混合编写
react和以往的前后台书写方式不一样。
在之前的多个语言中,讲求的是将页面代码和js代码逻辑分开,包括原来的css文件都有独立的分装。
而react的提供了一种html和js语句混合编写的方式。这就是jsx。
先不详说,体会一下先:
1 var arr = [ 2 <h1>Hello world!</h1>, 3 <h2>React is awesome</h2> 4 5 ]; 6//将html装到数组里面
7 ReactDOM.render( 8 <div>{arr}</div>, 9 document.getElementById('app'));
② props和省略号语法
props对象的属性与组件的属性一一对应.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | 'use strict'; import React,{Component} from 'react'; import ReactDOM from 'react-dom'; //声明一个组件类,叫MyTitle class MyTitle extends Component{ show(){ console.log(this.props.title); console.log(this.props.contents); console.log(this.props.name); } //渲染组件:一个按钮,并可以点击。 //注意bind(this)的写法,这是jsx语法要求的 //如果嫌麻烦也可以使用箭头函数。 render(){ return (< button onClick={ this.show.bind(this) }> click </ button >); } } //要向组件传递的数据 var data = {title:'this is a title',contents:'this is contents'}; ReactDOM.render( < MyTitle {...data} name={'my name'}/>, document.getElementById('app') ); |
上述代码实际上渲染出来的是一个button。
详细的说明看我的注释就好了。
③ this.props.children
在这个属性中获取传入的dom的节点信息。
可以用 React.Children.map方法遍历。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | 'use strict'; import React,{Component} from 'react'; import ReactDOM from 'react-dom'; class NodeList extends Component{ render(){ return( < ul > { //遍历this.props.children节点 React.Children.map(this.props.children,function(child){ return (< li >{child}</ li >); }) } </ ul > ); } } ReactDOM.render( < NodeList > < span >hello</ span > < span >world</ span > </ NodeList >, document.getElementById('app') ); |
参考:https://github.com/ZhangWeiStudy/React
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
![](https://www.cnblogs.com/images/cnblogs_com/amwuau/927688/o_1544511405530.jpg)
![](https://images.cnblogs.com/cnblogs_com/amwuau/927688/o_erweima.jpg)
作者:风来风往风伤
出处:http://www.cnblogs.com/amwuau/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· 用 DeepSeek 给对象做个网站,她一定感动坏了
· DeepSeek+PageAssist实现本地大模型联网
· 手把手教你更优雅的享受 DeepSeek
· 腾讯元宝接入 DeepSeek R1 模型,支持深度思考 + 联网搜索,好用不卡机!
· 从 14 秒到 1 秒:MySQL DDL 性能优化实战