react组件的2种写法

react组件写法1——函数式

import React from 'react';
import ReactDOM from 'react-dom';

function Header() {
    return <h1>I am header</h1>
}

function Footer() {
    return <h1>I am footer</h1>
}

ReactDOM.render(
    <div>
        <Header /><Footer />
    </div>,
    document.getElementById('app')
);

 

react组件写法2——es6提供的class类

使用class关键字定义一个HeaderEs6类，并通过extends表示继承自React.Component父类，

constructor用来初始化组件属性，this.state定义数据，super()为了接收到父类的this指针

import React from 'react';
import ReactDOM from 'react-dom';

class HeaderEs6 extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: 'header'
        }
    }
    render() {
        return <h1>I am {this.state.name}</h1>
    }
}

class Footer extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: 'footer'
        }
    }
    render() {
        return <h1>I am {this.state.name}</h1>
    }
}

ReactDOM.render(
    <div>
        <HeaderEs6 /><Footer />
    </div>,
    document.getElementById('app')
);

 

另外，不管你使用上面哪一种组件方法，都需要在外层用一个div包裹起来，否则会报错，提示目标容器不是DOM元素

如果错误提示为相邻的JSX元素必须包装在一个封闭的标记中，同样需要在组件外层用一个div包裹 

 

有需要的朋友可以领取支付宝到店红包，能省一点是一点