Reactクラス構成部品
7778 ワード
import React from "react";
export default class App extends React.Component {
constructor(props){
super(props)
this.state ={
name:"pandaman",
age : 27,
job:"PM"
}
render
}
redner(){
const {name,age,job} = this.state;
return (
<div>
<div>name:{name}</div>
<div>age:{age}</div>
<div>job:{job}</div>
</div>
)
}
}
クラスでextendsキーで継承するクラスを指定する
コンストラクション関数ジェネレータでスーパー()演算子を使用してリカバリします.コンポーネントthisを継承します.stateの有効化
setState()
-ステータスを非同期で実行するにはsetState()関数を使用する必要があります.
updater関数に渡されるstate、propは最新値でステータスを更新します
2番目のパラメータcallbackは、setStateの実行が完了し、構成部品がレンダリングされた後に実行される関数
onAgeHandler = () => {
this.steState((state) => {age:state.age +1})
}
onAgeHandler = () => {
const {age} = this.state;
this.steState({age:age +1})
}
//age가 업데이트되면 callback 작동하여 업데이트된 age가 로그에 남기게 됨
onAgeHandler = () => {
this.steState(prevState => ({
age:prevSTate.age + 1
}),
() => console.log(this.state.age)
);
}
ソース:https://oyg0420.tistory.com/entry/Reactjs-%EB%A6%AC%EC%95%A1%ED%8A%B8-state%EC%99%80-propsReference
この問題について(Reactクラス構成部品), 我々は、より多くの情報をここで見つけました https://velog.io/@pluviabc1/React-class형-컴포넌트テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol