React.js 小书 Lesson7 - 组件的 render 方法
- 作者:胡子大哈
- 原文链接:http://huziketang.com/books/react/lesson7
- 转载请注明出处,保留原文链接和作者信息。
React.js 中一切皆组件,用 React.js 写的其实就是 React.js 组件。我们在编写 React.js 组件的时候,一般都需要继承 React.js 的 Component
(还有别的编写组件的方式我们后续会提到)。一个组件类必须要实现一个 render
方法,这个 render
方法必须要返回一个 JSX 元素。但这里要注意的是,必须要用一个外层的 JSX 元素把所有内容包裹起来。返回并列多个 JSX 元素是不合法的,下面是错误的做法:
...
render () {
return (
<div>第一个</div>
<div>第二个</div>
)
}
...
必须要用一个外层元素把内容进行包裹:
...
render () {
return (
<div>
<div>第一个</div>
<div>第二个</div>
</div>
)
}
...
表达式插入
在 JSX 当中你可以插入 JavaScript 的表达式,表达式返回的结果会相应地渲染到页面上。表达式用 {}
包裹。例如:
...
render () {
const word = 'is good'
return (
<div>
<h1>React 小书 {word}</h1>
</div>
)
}
...
页面上就显示“React 小书 is good”。你也可以把它改成 {1 + 2}
,它就会显示 “React 小书 3”。你也可以把它写成一个函数表达式返回:
...
render () {
return (
<div>
<h1>React 小书 {(function () { return 'is good'})()}</h1>
</div>
)
}
...
简而言之,{}
内可以放任何 JavaScript 的代码,包括变量、表达式计算、函数执行等等。 render
会把这些代码返回的内容如实地渲染到页面上,非常的灵活。
表达式插入不仅仅可以用在标签内部,也可以用在标签的属性上,例如:
...
render () {
const className = 'header'
return (
<div className={className}>
<h1>React 小书</h1>
</div>
)
}
...
这样就可以为 div
标签添加一个叫 header
的类名。
注意,直接使用 class
在 React.js 的元素上添加类名如 <div class=“xxx”>
这种方式是不合法的。因为 class
是 JavaScript 的关键字,所以 React.js 中定义了一种新的方式:className
来帮助我们给元素添加类名。
还有一个特例就是 for
属性,例如 <label for='male'>Male</label>
,因为 for
也是 JavaScript 的关键字,所以在 JSX 用 htmlFor
替代,即 <label htmlFor='male'>Male</label>
。而其他的 HTML 属性例如 style
、data-*
等就可以像普通的 HTML 属性那样直接添加上去。
条件返回
{}
上面说了,JSX 可以放置任何表达式内容。所以也可以放 JSX,实际上,我们可以在 render
函数内部根据不同条件返回不同的 JSX。例如:
...
render () {
const isGoodWord = true
return (
<div>
<h1>
React 小书
{isGoodWord
? <strong> is good</strong>
: <span> is not good</span>
}
</h1>
</div>
)
}
...
上面的代码中定义了一个 isGoodWord
变量为 true
,下面有个用 {}
包含的表达式,根据 isGoodWord
的不同返回不同的 JSX 内容。现在页面上是显示 React 小书 is good
。如果你把 isGoodWord
改成 false
然后再看页面上就会显示 React 小书 is not good
。
如果你在表达式插入里面返回 null
,那么 React.js 会什么都不显示,相当于忽略了该表达式插入。结合条件返回的话,我们就做到显示或者隐藏某些元素:
...
render () {
const isGoodWord = true
return (
<div>
<h1>
React 小书
{isGoodWord
? <strong> is good</strong>
: null
}
</h1>
</div>
)
}
...
这样就相当于在 isGoodWord
为 true
的时候显示 <strong>is good</strong>
,否则就隐藏。
条件返回 JSX 的方式在 React.js 中很常见,组件的呈现方式随着数据的变化而不一样,你可以利用 JSX 这种灵活的方式随时组合构建不同的页面结构。
如果这里有些同学觉得比较难理解的话,可以回想一下,其实 JSX 就是 JavaScript 里面的对象,转换一下角度,把上面的内容翻译成 JavaScript 对象的形式,上面的代码就很好理解了。
JSX 元素变量
同样的,如果你能理解 JSX 元素就是 JavaScript 对象。那么你就可以联想到,JSX 元素其实可以像 JavaScript 对象那样自由地赋值给变量,或者作为函数参数传递、或者作为函数的返回值。
...
render () {
const isGoodWord = true
const goodWord = <strong> is good</strong>
const badWord = <span> is not good</span>
return (
<div>
<h1>
React 小书
{isGoodWord ? goodWord : badWord}
</h1>
</div>
)
}
...
这里给把两个 JSX 元素赋值给了 goodWord
和 badWord
两个变量,然后把它们作为表达式插入的条件返回值。达到效果和上面的例子一样,随机返回不同的页面效果呈现。
再举一个例子:
...
renderGoodWord (goodWord, badWord) {
const isGoodWord = true
return isGoodWord ? goodWord : badWord
}
render () {
return (
<div>
<h1>
React 小书
{this.renderGoodWord(
<strong> is good</strong>,
<span> is not good</span>
)}
</h1>
</div>
)
}
...
这里我们定义了一个 renderGoodWord
函数,这个函数接受两个 JSX 元素作为参数,并且随机返回其中一个。在 render
方法中,我们把上面例子的两个 JSX 元素传入 renderGoodWord
当中,通过表达式插入把该函数返回的 JSX 元素插入到页面上。
课后练习
因为第三方评论工具有问题,对本章节有任何疑问的朋友可以移步到 React.js 小书的论坛 发帖,我会回答大家的疑问。
React.js 小书 Lesson7 - 组件的 render 方法的更多相关文章
- React.js 小书 Lesson8 - 组件的组合、嵌套和组件树
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson8 转载请注明出处,保留原文链接和作者信息. 继续拓展前面的例子,现在我们已经有了 Heade ...
- React.js 小书 Lesson10 - 组件的 state 和 setState
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson10 转载请注明出处,保留原文链接和作者信息. state 我们前面提到过,一个组件的显示形态 ...
- React.js小书总结
(迁移自旧博客2017 08 27) 第一阶段 react的组件相当于MVC里面的View. react.js 将帮助我们将界面分成了各个独立的小块,每一个块就是组件,这些组件之间可以组合.嵌套,就成 ...
- React.js 小书 Lesson24 - PropTypes 和组件参数验证
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson24 转载请注明出处,保留原文链接和作者信息. 我们来了到了一个非常尴尬的章节,很多初学的朋友 ...
- React.js 小书 Lesson22 - props.children 和容器类组件
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson22 转载请注明出处,保留原文链接和作者信息. 有一类组件,充当了容器的作用,它定义了一种外层 ...
- React.js 小书 Lesson19 - 挂载阶段的组件生命周期(二)
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson19 转载请注明出处,保留原文链接和作者信息. 这一节我们来讨论一下对于一个组件来说,cons ...
- React.js 小书 Lesson18 - 挂载阶段的组件生命周期(一)
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson18 转载请注明出处,保留原文链接和作者信息. 我们在讲解 JSX 的章节中提到,下面的代码: ...
- React.js 小书 Lesson20 - 更新阶段的组件生命周期
作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson20 转载请注明出处,保留原文链接和作者信息. 从之前的章节我们了解到,组件的挂载指的是将组件 ...
- 【React.js小书】动手实现 React-redux(五):Provider - 方志
我们要把 context 相关的代码从所有业务组件中清除出去,现在的代码里面还有一个地方是被污染的.那就是 src/index.js 里面的 Index: 1234567891011121314151 ...
随机推荐
- dubbo心跳机制 (3)
此文已由作者赵计刚授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 二.consumer端心跳机制 //创建ExchangeClie ...
- 个人JS体系完善(一)
个人JS体系整理(一) 一. 原型 JS每声明一个Function,都有Prototype原型,Prototype原型是函数的一个默认属性,在函数的创建过程中由JS编译器自动添加,也就是说每当生产一个 ...
- Android源码树中C代码的编译
侯 Sir说:“源码之下,了无秘密.” 但有些秘密还是要搞起来了看得更真切,仅从静态代码的体位很难体会到运动时的妙处.因此环境搭好了,下一步就是调试.gdbserver搭配gdb的调试环境走得很顺利, ...
- 毛玻璃CHBlurEffect
1.将需要加入毛玻璃的UI控件传入接口即可 1.1 .h文件 // // 文 件 名:CHBlurEffect.h // // 版权所有:Copyright © 2018年 leLight. All ...
- [Study notes] To programing RGBD-SLAM together from Gaoxiang
Solve CMake Error in CMakeLists.txt (FIND_PAKAGE): CMake Error at src/CMakeLists.txt:5 (FIND_PACKAGE ...
- Git master branch has no upstream branch的解决
Git master branch has no upstream branch的解决 在push代码时,出现“git master branch has no upstream branch”问题的 ...
- 咕咕(数位dp+AC自动机)
咕咕(数位dp+AC自动机) 若一个字符串的字符集合是0~m-1,那么称它为m进制字符串.给出n个m进制字符串\(s_i\),每个字符串的权值为\(v_i\).对于另一个m进制字符串\(S\),设\( ...
- 装饰器设计模式初探及Java中实际应用举例
本篇随笔主要介绍用Java实现简单的装饰器设计模式: 先来看一下装饰器设计模式的类图: 从图中可以看到,我们可以装饰Component接口的任何实现类,而这些实现类也包括了装饰器本身,装饰器本身也可 ...
- Ceph配置文件查看修改方式
1. 修改ceph配置文件的方式有三种:(其中包含临时和永久生效) 1) 修改所有或者指定的进程 2) 修改当前服务器进程 3) 修改配置文件 Note:在线修改 ...
- P1903 [国家集训队]数颜色 / 维护队列 带修改的莫队
\(\color{#0066ff}{ 题目描述 }\) 墨墨购买了一套N支彩色画笔(其中有些颜色可能相同),摆成一排,你需要回答墨墨的提问.墨墨会向你发布如下指令: 1. Q L R代表询问你从第L支 ...