React-----学习笔记-----组件的render方法(四)

• 一个组件类必须要实现render方法，render方法必须要返回jsx元素，必须要用一个外层的 JSX元素把所有内容包裹起来。返回并列多个JSX元素是不合法的:
• 错误示例：

...
render () {
  return (
    <div>first</div>
    <div>second</div>
  )
}
...

• 必须使用外层元素包裹：

...
render () {
  return (
    <div>
      <div>first</div>
      <div>second</div>
    </div>
  )
}
...
表达

表达式插入

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

...
render () {
  const show = 'Hello World'
  return (
    <div>
      <h1>{show}</h1>
    </div>
  )
}
...

• {}内可以放任何 JavaScript 的代码，包括变量、表达式计算、函数执行等
• 表达式插入也可用于标签的属性上：

...
render () {
  const show = 'Hello World'
  const className = 'header'
  return (
    <div className={className}>
      <h1>{show}</h1>
    </div>
  )
}
...

• {}里边也可以放jsx,可以在render函数内部根据不同条件返回不同的JSX:

...
render () {
  const flag = true
  return (
    <div>
      <h1>
        {flag 
          ? <strong>happy</strong>
          : <span>sad</span>
        }
      </h1>
    </div>
  )
}
...