读react.js小书 中组件的render的方法（从零学react）
关于上一章jsx的总结
- JSX 是 JavaScript 语言的一种语法扩展，长得像 HTML，但并不是 HTML。
- React.js 可以用 JSX 来描述你的组件长什么样的。
- JSX 在编译的时候会变成相应的 JavaScript 对象描述。
react-dom负责把这个用来描述 UI 信息的 JavaScript 对象变成 DOM 元素，并且渲染到页面上。
首先在react中的一切都是组件，在组件的编写中都需要继承react.js的component方法，一个组件类必须要实现一个render的方法
...
render () {return (<div><div>第一个</div><div>第二个</div></div>)
}
...在return中只能返回一个元素，如果返回内容如下图，那么就会出现报错
...
render () {return (<div>第一个</div><div>第二个</div>)
}
...那么在我们的jsx的这个语法中可以插入我们的javascript的表达式，在jsx中会将结果渲染到页面上
...
render () {const word = 'is clear'return (<div><h1>学代码的小臻 {word}</h1></div>)
}
...我们通过{}来进行渲染我们的变量，当然不光是变量，我们还可以在{}来进行函数的编写具体代码如下
...
render () {return (<div><h1>学代码的小臻 {(function () { return 'is good'})()}</h1></div>)
}
...在jsx中也可以进行不同条件的返回来进行一个简单的判断
...
render () {const isGoodWord = truereturn (<div><h1>React 小书{isGoodWord? <strong> is good</strong>: <span> is not good</span>}</h1></div>)
}
...这里运用到了js的三目表达式
读react.js小书 中组件的render的方法（从零学react）相关推荐
- React.js小书总结
(迁移自旧博客2017 08 27) 第一阶段 react的组件相当于MVC里面的View. react.js 将帮助我们将界面分成了各个独立的小块,每一个块就是组件,这些组件之间可以组合.嵌套,就成 ...
- React.js 小书 Lesson24 - PropTypes 和组件参数验证
作者:胡子大哈 原文链接: http://huziketang.com/books/react/lesson24 转载请注明出处,保留原文链接和作者信息. 我们来了到了一个非常尴尬的章节,很多初学的朋 ...
- React.js 小书 Lesson18 - 挂载阶段的组件生命周期（一）
React.js 小书 Lesson18 - 挂载阶段的组件生命周期(一) 本文作者:胡子大哈 本文原文:http://huziketang.com/books/react/lesson18 转载请注 ...
- React.js 小书 Lesson1-2 - 前端组件化（一）：从一个简单的例子讲起
React.js 小书 Lesson1-2 - 前端组件化(一):从一个简单的例子讲起 本文作者:胡子大哈 本文原文:http://huziketang.com/books/react/lesson2 ...
- React.js 小书 Lesson12 - state vs props
React.js 小书 Lesson12 - state vs props 本文作者:胡子大哈 本文原文:http://huziketang.com/books/react/lesson12 转载请注 ...
- React.js 小书 Lesson14 - 实战分析：评论功能（一）
React.js 小书 Lesson14 - 实战分析:评论功能(一) 本文作者:胡子大哈 本文原文:http://react.huziketang.com/blog/lesson14 转载请注明出处 ...
- React.js 小书 Lesson27 - 实战分析：评论功能（六）
React.js 小书 Lesson27 - 实战分析:评论功能(六) 本文作者:胡子大哈 本文原文:http://huziketang.com/books/react/lesson27 转载请注明出 ...
- React.js 小书 Lesson5 - React.js 基本环境安装
React.js 小书 Lesson5 - React.js 基本环境安装 本文作者:胡子大哈 本文原文:http://huziketang.com/books/react/lesson5 转载请注明 ...
- React.js 小书 Lesson15 - 实战分析：评论功能（二）
作者:胡子大哈 原文链接: http://huziketang.com/books/react/lesson15 转载请注明出处,保留原文链接和作者信息. 上一节我们构建了基本的代码框架,现在开始完善 ...
- 微信小程序中组件的使用
微信小程序中组件的使用: 微信小程序中组件定义在项目根目录下components文件夹下,在页面使用的时候需要在页面的json文件中声明,如 父组件向子组件传值及子组件向父组件传值: 父组件wxml中 ...
最新文章
- CentOS7启动图形界面
- awk脚本打印终端各种颜色的字体
- error RC2108: expected numerical dialog constant
- 如何维护关键字_SEO人如何制定工作计划？【大站】
- 如何将CSV数据存储到Hive
- stateful function用法记录(还没弄完)
- Android内核剖析
- java sql范围查询语句,java类中写sql语句，查询条件包含换行
- bzoj4513 [Sdoi2016]储能表 dp
- FPGA不可综合语句
- C#中通过Selenium定位a标签的问题
- git原理详解与实操指南_基于dockercompose的Gitlab CI/CD实践amp;排坑指南
- 如果想成为数据科学家，请学习这3种语言
- 小程序学习笔记（2）-简单的小例子了解小程序的语法
- 中国单体酒店联盟沃家商务酒店（长沙）简介
- scara机器人dh参数表_SCARA机器人驱动方式及参数初定
- 下载youtube 在线工具_5款不用下载的免费在线做图工具，满足你日常图片处理需求...
- Android 通话录音功能
- 图机器学习——2.3 整图嵌入
- Java正则表达式实现港、澳、台身份证验证