React(5)组件复用

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

11、组件复用

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

  1. class HelloWord extends React.Component {
  2. constructor(props) {
  3. super(props);
  4. this.state = {
  5. count: 0
  6. }
  7. this.clickCount = this.clickCount.bind(this)
  8. }
  9. // 渲染函数,this 指向实例本身
  10. render() {
  11. return <div>
  12. <button onClick={this.clickCount}>点击我增加一次点击计数</button>
  13. <p>你已经点击了{this.state.count}次</p>
  14. </div>
  15. }
  16. clickCount() {
  17. this.setState({
  18. count: this.state.count + 1
  19. })
  20. }
  21. }
  22. ReactDOM.render(
  23. <div>
  24. <HelloWord/>
  25. <HelloWord/>
  26. </div>,
  27. document.getElementById('root')
  28. )

相关文章