[Riot.js] props와 state
props와state를 총괄한다.먼저 코드와 결과부터 시작합니다.
* 환경 구축 정보여기.
index.html
<!doctype html>
<html>
<head>
<title>Riot practice</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<app></app>
<script src="app.riot" type="riot"></script>
<script src="https://cdn.jsdelivr.net/npm/riot@4/riot+compiler.min.js"></script>
<script>
riot.compile().then(() => {
riot.mount('app', {
title: 'propsのタイトル',
})
})
</script>
</body>
</html>
<app>
<h3>{ props.title }</h3>
<h3>{ state.title }</h3>
<style>
h3 { color: green }
</style>
<script>
export default {
onMounted() {
console.log('マウントされました。')
// this.state.title = 'stateのタイトル' DOMは更新されない
this.update({
title: 'stateのタイトル'
})
}
}
</script>
</app>
props
구성 요소의 초기 속성을 수신합니다.
state
this.props 속성이 다운되면 this.state 대상은 완전히 바뀌고 수동 또는 this.update() 방법으로 업데이트됩니다.계수 응용 프로그램 만들기
나는 버튼만 누르면 1이 추가되는 간단한 프로그램을 만들었다.
1 증가하면 상태가 바뀐다.
따라서 사용
state.app.riot
<app>
<p>カウント：{ state.count }</p>
<button onclick={ plusCount }>+1</button>
<script>
export default {
state: {
count: 0
},
plusCount() {
this.update({
//count: this.state.count++ なぜか増えない
count: this.state.count += 1
})
}
}
</script>
</app>
state에서 값을 유지하고this.update()에서 1을 증가시켰다.보태다
this.state.count++하지만 값이 증가하지 않아...plusCount()내방치console.log(this)의 결과↓
Reference
이 문제에 관하여([Riot.js] props와 state), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/wafuwafu13/items/2c93d4203e12dd844430텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
