React（二）

React.js在写组件的时候一般都需要继承React.js的Component，并且组件类必须要实现一个render方法，这个方法必须要返回一个JSX元素（必须要用一个外层的JSX元素包裹，不能返回多个并列的JSX元素），错误做法如下：

 

...
render(){
  return(
    <div>a</div>
    <div>b</div>
    )
}
//改为如下为正确的
...
render(){
  return(
    <div>
      <div>a</div>
      <div>b</div>
    </div>
    )
}

 

在JSX当作可以插入JavaScript的表达式，表达式结果会相应的渲染到页面上，表达式用{}包裹

render(){
  const word = 'good'
  return(
    <div>
      <h1> React {word}</h1>
    </div>
    )
}  //页面显示为 React good

表达式也可以用在标签属性上

render(){
  const className = 'h'
  return(
     <div className={className}>  //给div添加一个h的类名
        <h1>hello</h1>
     </div>
  )
}

直接使用class在React.js在元素上添加类名是不合法的，class是JavaScript的关键子

 

组件的组合：

 

class Title extends Component{
  render(){
    renturn(
      <h1>hello</h1>
    )
}
class Header extends Component{
  render(){
    return(
      <div>
        <Title/>
      </div>
    )
  }
}
reactDOM.render(
  <Header/>,
  document.getElementById('root')
)

 

直接在Header标签里面使用Title标签，就像是一个普通标签一样，但是实际上Title标签是我们自己创建的。也可以多次使用，这样可复用性就非常强。还需要注意的一点，自定义组件必须要用大写字母开头，普通的HTML标签都用小写字母开头