react之第一个组件的定义及使用

//header.js

import  React from "react"; //"react"，如果r写成大写的话，浏览器里会出现警告
//如果不写export default，外部将访问不到
export default class ComponentHeader extends React.Component{ //class名开头必须大写
  render(){ //render解析类的输出
    return(
      <header>
        <h1>我是头部</h1>
      </header>
    )
  }
}

//footer.js

import React from "react";
export  default class ComponentFooter extends React.Component{
  render(){
    return(
      <footer>
        <h1>我是底部</h1>
      </footer>
    )
  }
}

//其它的js里引用header.js组件

import ComponentHeader from "./header"
import footer from "./footer"
import ReactDOM from "react-dom"
class Index extends React.Component{
  render(){
    //可用参数的形式引用组件
    let head=''
    //可加判断条件
    if(1===1){
      head= <ComponentHeader/>
    }else{
        head= <footer/>
    }
    //每个return里只能返回一个节点多个会报错
    return(
      <div>
        {head}
        {/*<ComponentHeader/>*/}
        <footer/>
      </div>
    )
  }
}
ReactDOM.render(<index/>,document.getElementById('entry'));//往整个项目里做绑定,entry是项目入口的html里的id值

　　

转载于:https://www.cnblogs.com/cxdxm/p/6863421.html