函数组件的用法

最新推荐文章于 2024-10-02 05:39:15 发布

不吃糖葫芦3

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量64

点赞数

文章标签： javascript react.js 前端

本文链接：https://blog.csdn.net/qq_44331582/article/details/130485534

版权

import './App.css';
import react from 'react'
// 函数组件
// function HelloFn(){
//   const clickFn = () => {
//     console.log('点击了按钮');
//   }
//   return (
//     <div>
//       我是HelloFn组件
//       <button onClick={clickFn}>按钮</button>
//     </div>

//   )
// }

//函数组件
function HelloFn(){
  const clickFn = () => {
    console.log('点击了按钮')
  }
  return (
    <div>
      我是函数组件
      <button onClick={clickFn}>点击按钮</button>
    </div>
  )
}


//类组件
// class HelloFn extends react.Component{  
//   //方法
//   clickBtn(){
//     console.log('类组件通过this.方法 ——点击了按钮')
//   }
//   clickBtn1(name1){
//     console.log('类组件通过this.方法 ——点击了按钮',name1)
//   }

//   render(){
//     return (
//       <div>
//         我是类组件HelloFn
//         <button onClick={this.clickBtn}>按钮</button>
//         <button onClick={ () => this.clickBtn1('小花')}>按钮传参数</button>
//       </div>
//     )
//   }
// }

function App() {
  return (
    <div className="App">
      <HelloFn />
    </div>
  )
}

export default App;