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 元素插入到页面上。

下一节:组件的组合、嵌套和组件树

上一节:使用 JSX 描述 UI 信息

组件的 render 方法的更多相关文章

  1. React.js 小书 Lesson7 - 组件的 render 方法

    作者:胡子大哈 原文链接:http://huziketang.com/books/react/lesson7 转载请注明出处,保留原文链接和作者信息. React.js 中一切皆组件,用 React. ...

  2. IVIEW组件的render方法在Table组件中的使用

    后端项目地址:https://gitee.com/wlovet/table-server 前端项目地址:  https://gitee.com/wlovet/table-project 一.Rende ...

  3. React高阶组件 和 Render Props

    高阶组件 本质 本质是函数,将组件作为接收参数,返回一个新的组件.HOC本身不是React API,是一种基于React组合的特而形成的设计模式. 解决的问题(作用) 一句话概括:功能的复用,减少代码 ...

  4. 010 vue使用render方法渲染组件

    1.普通的组件渲染方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  5. 我们一起来详细的了解react的语法以及组件的使用方法

    jsx的介绍 React 使用 JSX 来替代常规的 JavaScript. JSX 是一个看起来很像 XML 的 JavaScript 语法扩展. jsx的优点 JSX 执行更快,因为它在编译为 J ...

  6. reactjs--父组件调用子组件的内部方法(转载)

    reactjs--父组件调用子组件的内部方法 发表于2016/10/11 9:21:37  965人阅读 1.引入相关js <script src="js/react.js" ...

  7. 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法

    一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...

  8. win10 64位专业版系统中显示32位dcom组件配置的方法

    word.excel是32位的组件,当用户64位系统在运行窗口中输入dcomcnfg命令时,在打开的组件服务管理窗口,是找不到Microsoft Excel.word程序的.另外,Windows 环境 ...

  9. render()方法是render_to_response

    自django1.3开始:render()方法是render_to_response的一个崭新的快捷方式, 前者会自动使用 RequestContext.而后者必须coding 出来,这是最明显的区别 ...

随机推荐

  1. 推断php操作mysql(添删改查)是否成功

    近期在使用CI框架 , 可是里面的数据库操作没有ThinkPhp方便 , 不知道数据库操作的反馈信息 , 仅仅好借助原生方法来推断是否操作数据库成功 推断php操作mysql(添删改查)是否成功,主要 ...

  2. HDU2089 不要62 —— 数位DP

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2089 不要62 Time Limit: 1000/1000 MS (Java/Others)    M ...

  3. UVA11624 Fire! —— BFS

    题目链接:https://vjudge.net/problem/UVA-11624 题解: 坑点:“portions of the maze havecaught on fire”, 表明了起火点不唯 ...

  4. ASP.NET Session and Forms Authentication and Session Fixation

    https://peterwong.net/blog/asp-net-session-and-forms-authentication/ The title can be misleading, be ...

  5. linux初级学习笔记五:bash特性详解!(视频序号:03_2,3)

    本节学习的命令:history,alias,ualias,\CMD 本节学习的技能:   bash的特性 光标跳转 查看命令历史 命令历史的使用技巧 给命令起别名 命令替换 文件名通配符 shell: ...

  6. String bulit-in function

    tip: 和tuple一样,字符串也是不可变的类型,字符串的内建函数有非常多,我们一一举例来看看他们的作用 下面是用dir(str) 输出的内容: ['__add__', '__class__', ' ...

  7. oracle:数据库版本问题导致的bug

    公司开发出来的系统,由于各现场oracle数据库版本有10.2.0.4.11.2.0.1.11.2.0.3.11.2.0.4: 进而会导致版本不一导致错误问题.下面列举2个: 1.wm_concat ...

  8. solr安装-tomcat+solrCloud构建稳健solr集群

    solrCloud的搭建可以有两种方式:使用solr内嵌的jetty来搭建:使用外部web容器tomcat来搭建.对于使用jett来搭建参考solr官方的手册照着做肯定ok,下面我主要讲的是如何使用t ...

  9. [Java] 读取文件

    1.按字节读取文件内容2.按字符读取文件内容3.按行读取文件内容 4.随机读取文件内容 public class ReadFromFile { /** * 以字节为单位读取文件,常用于读二进制文件,如 ...

  10. [Selenium] Selenium find Element Examples

    ---> 1. By.id  以百度主页为例 <span classs = "bg s_ipt_wr"> <input type = "text& ...