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.
42 lines
1.2 KiB
42 lines
1.2 KiB
import React from 'react'
|
|
|
|
class TestComponent extends React.Component {
|
|
// 1.定义组件状态
|
|
state = {
|
|
// 在这里可以定义各种属性，全都都是当前组件的状态
|
|
name: 'Ken',
|
|
}
|
|
// 事件回调
|
|
changeName = () => {
|
|
// 3.修改 state 中的状态 name
|
|
// 注意：不可以直接做赋值修改，必须通过一个方法 setState
|
|
this.setState({
|
|
name: 'King',
|
|
})
|
|
}
|
|
// 2.使用状态
|
|
render() {
|
|
return (
|
|
<div>
|
|
TestComponent当前的名字为：{this.state.name}
|
|
<button onClick={this.changeName}>修改名字</button>
|
|
</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
function App() {
|
|
return (
|
|
<div>
|
|
<TestComponent></TestComponent>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
/* 总结
|
|
1.编写组件其实就是编写原生 JS 类或者函数
|
|
2.定义状态必须通过 state 实例属性的方法提供一个对象，名称是固定的就叫做 state
|
|
3. 修改state中的任何属性都不可以通知直接赋值，必须走 setState 方法，这个方法来自于继承得到
|
|
4.这里的 this 关键词很容易出现指向错误的问题，上面的写法是最推荐和最规范的，没有 this 指向问题
|
|
*/
|
|
export default App
|