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

Near_Li 发布于2019-08-21 17:33 / 1952人阅读

摘要：一个组件类必须要实现一个方法，这个方法必须要返回一个元素。你也可以把它改成，它就会显示小书。注意，直接使用在的元素上添加类名如这种方式是不合法的。现在页面上是显示小书。下一节中我们将介绍小书组件的组合嵌套和组件树。

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

本文作者：胡子大哈
本文原文：http://huziketang.com/books/react/lesson7

转载请注明出处，保留原文链接以及作者信息

在线阅读：http://huziketang.com/books/react

React.js 中一切皆组件，用 React.js 写的其实就是 React.js 组件。我们在编写 React.js 组件的时候，一般都需要继承 React.js 的 Component（还有别的编写组件的方式我们后续会提到）。一个组件类必须要实现一个 render 方法，这个 render 方法必须要返回一个 JSX 元素。但这里要注意的是，必须要用一个外层的 JSX 元素把所有内容包裹起来。返回并列多个 JSX 元素是不合法的，下面是错误的做法：

...
render () {
  return (
    第一个
    第二个
  )
}
...

必须要用一个外层元素把内容进行包裹：

...
render () {
  return (
    
      第一个
      第二个
    
  )
}
...

表达式插入

在 JSX 当中你可以插入 JavaScript 的表达式，表达式返回的结果会相应地渲染到页面上。表达式用 {} 包裹。例如：

...
render () {
  const word = "is good"
  return (
    
      React 小书 {word}
    
  )
}
...

页面上就显示“React 小书 is good”。你也可以把它改成 {1 + 2}，它就会显示 “React 小书 3”。你也可以把它写成一个函数表达式返回：

...
render () {
  return (
    
      React 小书 {(function () { return "is good"})()}
    
  )
}
...

简而言之，{} 内可以放任何 JavaScript 的代码，包括变量、表达式计算、函数执行等等。 render 会把这些代码返回的内容如实地渲染到页面上，非常的灵活。

表达式插入不仅仅可以用在标签内部，也可以用在标签的属性上，例如：

...
render () {
  const className = "header"
  return (
    
      React 小书
    
  )
}
...

这样就可以为 div 标签添加一个叫 header 的类名。

注意，直接使用 class 在 React.js 的元素上添加类名如

这种方式是不合法的。因为 class 是 JavaScript 的关键字，所以 React.js 中定义了一种新的方式：className 来帮助我们给元素添加类名。

还有一个特例就是 for 属性，例如 Male，因为 for 也是 JavaScript 的关键字，所以在 JSX 用 htmlFor 替代，即 Male。而其他的 HTML 属性例如 style 、data-* 等就可以像普通的 HTML 属性那样直接添加上去。

条件返回

{} 上面说了，JSX 可以放置任何表达式内容。所以也可以放 JSX，实际上，我们可以在 render 函数内部根据不同条件返回不同的 JSX。例如：

...
render () {
  const isGoodWord = true
  return (
    
      
        React 小书
        {isGoodWord
          ?  is good
          :  is not good
        }
      
    
  )
}
...

上面的代码中定义了一个 isGoodWord 变量为 true，下面有个用 {} 包含的表达式，根据 isGoodWord 的不同返回不同的 JSX 内容。现在页面上是显示 React 小书 is good。如果你把 isGoodWord 改成 false 然后再看页面上就会显示 React 小书 is not good。

如果你在表达式插入里面返回 null ，那么 React.js 会什么都不显示，相当于忽略了该表达式插入。结合条件返回的话，我们就做到显示或者隐藏某些元素：

...
render () {
  const isGoodWord = true
  return (
    
      
        React 小书
        {isGoodWord
          ?  is good
          : null
        }
      
    
  )
}
...

这样就相当于在 isGoodWord 为 true 的时候显示 is good，否则就隐藏。

条件返回 JSX 的方式在 React.js 中很常见，组件的呈现方式随着数据的变化而不一样，你可以利用 JSX 这种灵活的方式随时组合构建不同的页面结构。

如果这里有些同学觉得比较难理解的话，可以回想一下，其实 JSX 就是 JavaScript 里面的对象，转换一下角度，把上面的内容翻译成 JavaScript 对象的形式，上面的代码就很好理解了。

JSX 元素变量

同样的，如果你能理解 JSX 元素就是 JavaScript 对象。那么你就可以联想到，JSX 元素其实可以像 JavaScript 对象那样自由地赋值给变量，或者作为函数参数传递、或者作为函数的返回值。

...
render () {
  const isGoodWord = true
  const goodWord =  is good
  const badWord =  is not good
  return (
    
      
        React 小书
        {isGoodWord ? goodWord : badWord}
      
    
  )
}
...

这里给把两个 JSX 元素赋值给了 goodWord 和 badWord 两个变量，然后把它们作为表达式插入的条件返回值。达到效果和上面的例子一样，随机返回不同的页面效果呈现。

再举一个例子：

...
renderGoodWord (goodWord, badWord) {
  const isGoodWord = true
  return isGoodWord ? goodWord : badWord
}

render () {
  return (
    
      
        React 小书
        {this.renderGoodWord(
           is good,
           is not good
        )}
      
    
  )
}
...

这里我们定义了一个 renderGoodWord 函数，这个函数接受两个 JSX 元素作为参数，并且随机返回其中一个。在 render 方法中，我们把上面例子的两个 JSX 元素传入 renderGoodWord 当中，通过表达式插入把该函数返回的 JSX 元素插入到页面上。

下一节中我们将介绍《React.js 小书 Lesson8 - 组件的组合、嵌套和组件树》。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89667.html

React.js 小书 Lesson6 - 使用 JSX 描述 UI 信息

摘要：上面的代码小书经过编译以后会变成小书会构建一个对象里描述你结构的信息，包括标签名属性还有子元素等。第二个原因是，有了这样一个对象。负责把这个用来描述信息的对象变成元素，并且渲染到面上。下一节中我们将介绍小书组件的方法。 React.js 小书 Lesson6 - 使用 JSX 描述 UI 信息本文作者：胡子大哈本文原文：http://huziketang.com/books/rea...

ChanceWong 2019-08-21 17:33 评论0 收藏0
React.js 小书 Lesson18 - 挂载阶段的组件生命周期（一）

摘要：我们把将组件渲染，并且构造元素然后塞入页面的过程称为组件的挂载这个定义请好好记住。挂载的时候，会在组件的之前调用，在元素塞入页面以后调用。下一节中我们将介绍小书挂载阶段的组件生命周期二。 React.js 小书 Lesson18 - 挂载阶段的组件生命周期（一）本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson18 转载请注...

pf_miles 2019-08-21 17:34 评论0 收藏0
React.js 小书 Lesson8 - 组件的组合、嵌套和组件树

摘要：小书最后页面会显示内容组件可以和组件组合在一起，组件内部可以使用别的组件。当页面结构复杂起来，有许多不同的组件嵌套组合的话，组件树会相当的复杂和庞大。下一节中我们将介绍小书事件监听。 React.js 小书 Lesson8 - 组件的组合、嵌套和组件树本文作者：胡子大哈本文原文：http://huziketang.com/books/react/lesson8 转载请注明出处，保留...

AbnerMing 2019-08-21 17:33 评论0 收藏0
React.js 小书 Lesson4 - 前端组件化（三）：抽象出公共组件类

摘要：最后抽离出来了一个类，可以帮助我们更好的做组件化。一个组件有自己的显示形态上面的结构和内容行为，组件的显示形态和行为可以由数据状态和配置参数共同决定。接下来我们开始正式进入主题，开始正式介绍。下一节链接直达小书基本环境安装 React.js 小书 Lesson4 - 前端组件化（三）：抽象出公共组件类本文作者：胡子大哈本文原文：http://huziketang.com/books...

jsbintask 2019-08-21 17:32 评论0 收藏0
React.js 小书 Lesson3 - 前端组件化（二）：优化 DOM 操作

摘要：一个组件的显示形态由多个状态决定的情况非常常见。我们顺利地消除了手动的操作。非一般的暴力，因为每次都重新构造新增删除元素，会导致浏览器进行大量的重排，严重影响性能。下一节小书前端组件化三抽象出公共组件类我们把这个通用模式抽离到一个类当中。 React.js 小书 Lesson3 - 前端组件化（二）：优化 DOM 操作本文作者：胡子大哈本文原文：http://huziketang....

Drinkey 2019-08-21 17:32 评论0 收藏0