使用react組件拼接頁面的2種方式

第一種：純組件形式引用，比如<組件名 />（推薦）

使用class定義了一個名為HeaderEs6的組件，然后在render方法中引入這個組件 <HeaderEs6 />，

如果有多個組件要引用，根據對應關系添加在<HeaderEs6 />前后即可 

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

class HeaderEs6 extends React.Component {
    //constructor用來初始化組件屬性，this.state定義數據，super()為了接收到父類的this指針
    constructor(props) {
        super(props);
        this.state = {
            name: 'kevin',
            age: 29
        }
    }
    handleClick() {
        this.setState({
            age: this.state.age + 1
        });
    }
    onValueChange(e) {
        this.setState({
            age: e.target.value
        })
    }
    render() {
        return (
            <div>
                <h1>I am {this.state.name}</h1>
                <p>I am {this.state.age} years old</p>
                <input onChange={(e) => { this.onValueChange(e) }} type="text" />
                <button onClick={(e) => { this.handleClick(e) }}>加一歲</button>
            </div>
        )
    }
}

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

  

第二種：容器式組件

容器式組件一般用在頁面框架結構中，拼接頁面個人還是推薦上面組件的形式，通俗易懂，化復為簡

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

//props的作用，用來接收父組件傳遞過來的參數
class HeaderEs6 extends React.Component {
    //constructor用來初始化組件屬性，this.state定義數據，super()為了接收到父類的this指針
    constructor(props) {
        super(props);
        this.state = {
            name: 'kevin',
            age: 29
        }
    }
    handleClick() {
        this.setState({
            age: this.state.age + 1
        });
    }
    onValueChange(e) {
        this.setState({
            age: e.target.value
        })
    }
    render() {
        return (
            <div>
                <h1>I am {this.state.name}</h1>
                <p>I am {this.state.age} years old</p>
                <input onChange={(e) => { this.onValueChange(e) }} type="text" />
                <button onClick={(e) => { this.handleClick(e) }}>加一歲</button>
            </div>
        )
    }
}

class Title extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        // 這里的children表示由Title組件包含起來的部分
        return <h1>{this.props.children}</h1>
    }
}

class App extends React.Component {
    render() {
        return (
            <div>
                {/* 容器組件方式 */}
                {/* 所以這里可以用html標簽的形式 */}
                <Title>
                    <span>App span</span>
                    <a href="#">link</a>
                </Title>
                <hr />
                {/* 純組件方式 */}
                <HeaderEs6 />
            </div>
        )
    }
}

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