组件的 render 方法

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 信息