使用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')
);

 

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