react学习记录-组件的render方法

组件的render方法

React.js 中一切皆组件，用 React.js 写的其实就是 React.js 组件。我们在编写 React.js 组件的时候，一般都需要继承 React.js 的 Component，并为这个组件子类实现一个render方法，这个render方法必须要返回一个JSX元素。

只能返回一个JSX

需要注意的是，返回多个并列的JSX元素是不合法的，我们需要用一个外层的JSX元素将它们包裹起来：

render () {
  return (
    

      
第一个
      
第二个
    
  )
}

表达式插入

在render方法中，我们可以插入一些JavaScript表达式，例如：

render () {
  const word = 'is good'
  return (
    

      
React 小书 {word}
	  {/* 
React 小书 {(function () { return 'is good'})()}
 */}
    
  )
}

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

JSX中插入注释需要注意一下，一般是和js相同的，如果在标签内，则需要加上{} 。

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

render () {
  const className = 'header'
  return (
    

      
React 小书
    
  )
}

条件返回

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

render () {
  const isGoodWord = true
  return (
    

      

        React 小书
        {isGoodWord
          ?  is good
          : null
        }
      
    
  )
}

JSX元素变量

JSX元素既然是JavaScript对象，那么它也可以被赋值给变量，或者作为函数参数或返回值。

// 变量
const goodWord =  is good
const badWord =  is not good
// 函数参数
renderGoodWord (goodWord, badWord) {
  const isGoodWord = true
  return isGoodWord ? goodWord : badWord
}
render () {
  return (
    

      

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

课后习题

用 React.js 构建未读消息组件

class Notification extends Component {
  render () {
    const N=getNotificationsCount();
    return(
      {N>0?`有(${N})条`:"没有"}未读消息
    )
  }
}

JSX元素变量

const title = <h1 className="title">ScriptOJ</h1> /* TODO */
const page = <div className="content">{
     title}</div> /* TODO */