Lesson7组件的render函数

render函数的注意点

1. 一个组件必须要实现一个render方法，这个render方法必须返回一个JSX元素，该元素必须是只有一个根节点的JSX元素。
2. JSX语法规则。
   (1).. 在JSX当中你可以插入JavaScript的表达式，表达式返回的结果会相应地渲染到页面上。
   (2).. {}内可以放任何JavaScript的代码，包括变量、表达式计算、函数执行等等。render函数会把这些代码返回的内容如实地渲染到页面上，非常的灵活。
   (3).. 表达式插入不仅仅可以用在标签内部，也可以用在标签的属性上（class需替换为className,for需替换为htmlFor）
   (4).. 条件返回：JSX中也可以使用JSX如：
   {isFlag?<span>good</span>:<span>bad</span>}
   如果你在表达式插入里返回null，那么React.js会什么都不显示，相当于忽略了该表达式插入。结合条件返回的话，相当于做到控制某元素的显示隐藏。
   如：{isFlag?<span>good</span>:null}
   (5).. JSX元素变量：
   JSX元素就是JavaScript对象，所以可以自由地赋值给变量，或着作为参数传递、或着作为函数的返回值。如下二例：
   一：

render(){
  const isGoodWord = true
  const goodWord = <span>good</span>
  const badWord = <span>bad</span>
  return (
    <div>
        <h1>React小书{isGoodWord ?goodWord:badWord}</h1>
    </div>
  )
} 

二：

renderGoodWord(goodWord,badWord){
    const isGoodWord = true
    return isGoodWord?goodWord:badWord
}
render(){
    return (
        <div>
              <h1>React小书
{this.renderGoodWord(<span>span</span>,<span>bad</span>)}
              </h1>
        </div>
    )
}