나는 꽤 간단한 상황을 가지고 있습니다 (A-Frame / A-Frame React와 함께 ReactJS를 사용하고 있지만 여기에는 실제로 영향을 미치지 않아야합니다).
사용자에게 개체를 클릭 / 스 와이프 할 수 있음을 암시하는 엔터티가 있습니다. 사용자가 해당 개체를 클릭 한 후 해당 개체가 사라지고 10 초 후에 다시 나타나기를 원합니다.
나는 상대적으로 React를 처음 사용하므로 여기서 뭔가 잘못하고있을 수 있습니다.
내 JS 파일의 맨 위에 (가져온 후 class시작 하기 전에let showHinter = true;
내 render()방법에 다음과 같은 엔티티가 있습니다 .
<AFrameEntity
events={{
click: (ev) => {
showHinter = false;
setTimeout(() => {
console.log("showHinter Value:", showHinter)
/* ↑ This fires, but ↓ this doesn't do anything */
showHinter = true;
console.log("showHinter Value:", showHinter)
}, 5000)
}
}}
>
</AFrameEntity>
내 "힌터"구성 요소는 다음과 같은 형제입니다.
{
<AFrameEntity /* Bunch of irrelevant stuff here */ >
// fade out
{
!showHinter &&
<a-animation
attribute="material.opacity"
dur="1000"
fill="forwards"
from="1"
to="0"
repeat="0"></a-animation>
}
//fade in
{
showHinter &&
<a-animation
attribute="material.opacity"
dur="1000"
fill="forwards"
from="0"
to="1"
repeat="0"></a-animation>
}
</AFrameEntity>
}
클릭 showHinter하면가 올바르게 false로 설정되고 요소가 사라집니다. 그러나 다시 나타나지 않습니다. 내 콘솔 로그 가 발생 showHinter === false하지만 내 페이드 인 애니메이션이 발생하지 않으며 react의 devtools로 요소를 검사하면 페이드 아웃 애니메이션 엔티티가 표시되고 페이드 인 항목이 표시되지 않습니다 showHinter === true.
그래서 기본적인 질문은 왜 React가 내 변수 변경에 반응하지 않는 것일까 요? 어떻게 든 강제로 다시 렌더링해야합니까?
뷰에 영향을 미치는 모든 변경을 수행하거나 상태를 통해 다시 렌더링해야합니다.
귀하의 경우에는 다음과 같은 작업을 수행하십시오 (테스트되지 않음).
<AFrameEntity
events={{
click: (ev) => {
this.setState({showHinter: false)};
setTimeout(() => {
console.log("showHinter Value:", this.state.showHinter)
/* ↑ This fires, but ↓ this doesn't do anything */
this.setState({showHinter: true)};
console.log("showHinter Value:", this.state.showHinter)
}, 5000)
}
}}
그리고 렌더링 기능에서 상태를 확인하십시오.
{
<AFrameEntity /* Bunch of irrelevant stuff here */ >
// fade out
{
!this.state.showHinter &&
<a-animation
attribute="material.opacity"
dur="1000"
fill="forwards"
from="1"
to="0"
repeat="0"></a-animation>
}
//fade in
{
this.state.showHinter &&
<a-animation
attribute="material.opacity"
dur="1000"
fill="forwards"
from="0"
to="1"
repeat="0"></a-animation>
}
</AFrameEntity>
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다