您现在的位置:首页 >> 前端 >> 内容

React组件复用代码讲解

时间:2018/2/13 15:11:57 点击:

  核心提示:11、组件复用同一个组件可以同时插入多个到父组件中,并且各个组件的状态是独立的。(和Vue的组件是一个道理,用法也类似)class HelloWord extends React.Component ...

11、组件复用

同一个组件可以同时插入多个到父组件中,并且各个组件的状态是独立的。(和Vue的组件是一个道理,用法也类似) 

class HelloWord extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0
        }
        this.clickCount = this.clickCount.bind(this)
    }

    // 渲染函数,this 指向实例本身
    render() {
        return <p>
            <button onClick={this.clickCount}>点击我增加一次点击计数</button>
            <p>你已经点击了{this.state.count}次</p>
        </p>
    }

    clickCount() {
        this.setState({
            count: this.state.count + 1
        })
    }
}

ReactDOM.render(
    <p>
        <HelloWord/>
        <HelloWord/>
    </p>,
    document.getElementById('root')
)

Tags:RE EA AC CT 
作者:网络 来源:qq20004604