You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
40 lines
906 B
40 lines
906 B
// 导入 React 包
|
|
import React from 'react'
|
|
|
|
// 函数组件的创建和渲染
|
|
// 创建
|
|
function Hello() {
|
|
// 定义事件回调函数
|
|
const clickHandle = () => {
|
|
alert('函数组件中的事件被触发了')
|
|
}
|
|
// 事件绑定
|
|
return <div onClick={clickHandle}>Hello everbody</div>
|
|
}
|
|
|
|
// 类组件的创建和渲染
|
|
// 创建
|
|
class HelloComponent extends React.Component {
|
|
// 事件回调函数(标准写法,可以避免this指向问题)
|
|
// 这样写 回调函数中的this指向的是当前的组件实例对象
|
|
clickHandle = () => {
|
|
alert('类组件中的事件被触发了')
|
|
}
|
|
render() {
|
|
// 事件绑定
|
|
return <div onClick={this.clickHandle}>this is class Component</div>
|
|
}
|
|
}
|
|
|
|
function App() {
|
|
return (
|
|
<div>
|
|
<Hello />
|
|
<Hello></Hello>
|
|
<HelloComponent />
|
|
<HelloComponent></HelloComponent>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default App
|