【React】3.添加一个组件

1.下载素材。

关注公众号，免费获取源码，如有提供源码会有说明。

2.添加一个ClickCounter组件。

在src目录下，新建一个ClickCounter.js。

import React,{Component} from "react";

//新建一个类，继承Component
class ClickCounter extends Component{
	
	//初始化，简易理解
	//通过state储存本类的变量（如定义count变量，初始值为0）
	//通过bind（）方法绑定本类的方法（如下面定义onClickToIncrease（）方法，通过bind（）方法绑定）
    constructor(props) {
        super(props);
        this.onClickToIncrease = this.onClickToIncrease.bind(this);
        this.state = {
            count:0
        };
    }
	
	//定义一个方法用于记录点击次数
    onClickToIncrease() {
        this.setState({
            count: this.state.count + 1
        });
    }

	//渲染（画界面）
    render() {
    	//return（）方法里进行绘画
    	//方法绑定，通过this.方法名
    	//变量绑定，通过this.state.变量名
        return (
            <div>
                <button onClick={this.onClickToIncrease}>点击我记录点击次数</button>
                <div>当前点击次数是：{this.state.count}</div>
            </div>
        );
    }
}

//输出组件
export default ClickCounter;

3.修改index.js。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

//导入ClickCounter组件
import ClickCounter from './ClickCounter';
import * as serviceWorker from './serviceWorker';

//渲染组件，输出界面
ReactDOM.render(<ClickCounter />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

4.效果图。