2017-01-06 4 views
0

필자는 상태에 따라 스타일을 조건부로 통과합니다. 그렇지 않으면 전이가 발생하지 않기 때문에 구성 요소가 렌더링 된 후 변환을 적용하려고합니다. 이를 달성하는 가장 좋은 방법은 setTimeout에 의한 것이라고 들었지만, 어떻게 함수의 반환을 타임 아웃 할 수 있습니까?함수 반환시 SetTimeout?

style= { 
    transition: 'transform 1s', 
    ...this.zoomedIn && this.mobileZoom(i), 
} 

zoomedIn() { 
    return ['zoomIn', 'addBg', 'zoom', 'removeBg'].includes(this.state.zoom) 
} 

mobileZoom() { 
    const transform = this.state.transform.mobile 
    if (window.innerWidth < 600) { 
    return { 
     zIndex: 1070, 
     transform: 'translateY(' + transform.offset + 'px) scale(' + transform.scale + ')' 
    } 
    } 
} 
+0

약간의 혼란, 당신은 당신이 후에 함수를 실행하려는 의미 DOM 요소가 렌더링됩니까? – bugfroggy

+2

'어떻게 함수의 반환을 타임 아웃 할 수 있습니까? '반환 값을 타임 아웃 할 수 없습니다. 'setTimeout'은 끝 상태이고 그 안에 처리되는 것은 무엇이든 처리합니다. _later_ -'return'을 넣으면 _later_를 실행하여 어떤 값을 생성 한 다음 아무것도 아닌 것으로 가비지 컬렉션의 신에게 희생시킵니다 그것을 집어 들었다. 당신이 할 수있는 것은 약속이 성취되었을 때 약속을 지키고 행동하는 것입니다. 예를 들어,'setTimeout' 접촉의 코드가 무언가 독립적이기 때문에 값을 "픽업"하는 다른 것에 의존하지 않습니다. – vlaz

+0

React에 대해 많이 알지는 못하지만 Angular와 비슷한 구성 요소 수명주기가 "onInit"과 동등한 것으로 가정하고 예상 한 작동이 트리거되는지 확인합니다. 자식 구성 요소 인 경우 "onChildrenRender"또는 뭔가가있을 수 있습니다. 또는 렌더링 된 광고문에서 부모에게 이벤트를 전달하여 자녀가 준비되었음을 알릴 수는 있지만 다시는 필요하지 않을 수 있습니다. 나는 이런 종류의 타이머를 사용하는 것이 위험하다는 것을 발견했다. React가 이에 대한 강력한 구성 요소 라이프 사이클을 갖고 있지 않다면 놀랄 것입니다. –

답변

0

당신의 setTimeout 함수에 반환 값을 설정하지만, 당신이 할 수 있다면 당신은 함수에서 값을 반환 할 수 없습니다

zoomedIn() { 
var send = new promise(function(resolve, reject) { 
    setTimeout(function() { 
     resolve(['zoomIn', 'addBg', 'zoom', 'removeBg'].includes(this.state.zoom)); 
    }); 
    }); 
    return send; 
} 

//call function like this 

zoomedIn().then(function(value) { 
    console.log(value); 
}); 
관련 문제