React(5)组件复用

x33g5p2x  于2022-03-06 转载在 其他  
字(0.5k)|赞(0)|评价(0)|浏览(422)

11、组件复用

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

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

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

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

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

相关文章