读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 = true
  return (
    <div>
      <h1>
        React 小书
        {isGoodWord
          ? <strong> is good</strong>
          : <span> is not good</span>
        }
      </h1>
    </div>
  )
}
...

这里运用到了js的三目表达式