ReactJS가있는 Google+ 로그인 버튼

Question

내 React 코드에서 Google+ 로그인 버튼을 사용하려고합니다. 반응 코드는 다음과 같습니다 (실제 코드는 CLIENT_ID에 적절한 값을가집니다). 는 OAuth는 대화 상자가 나타납니다 수락을 치는 것은 그것이 사라지게하고 오류/경고가 대화 나 자바 스크립트 콘솔에서 하나 생성되지 않습니다에

React.DOM.div({className: "signin-with-google"}, 
    React.DOM.span({id: "signinButton"}, 
    React.DOM.span({ 
     className: "g-signin", 
     'data-callback': this.signinCallback, 
     'data-clientid': "CLIENT_ID", 
     'data-cookiepolicy': "single_host_origin", 
     'data-scope': "https://www.googleapis.com/auth/userinfo.email"} 
    ) 
) 
) 

은 버튼을 클릭하면 페이지에서 제대로 표시됩니다. 그래서 내 지식을 최대한으로 모든 것이 예상대로 작동합니다.

그러나 내가 지정하는 this.signinCallback 콜백 메소드가 호출되지 않습니다. 내가 여기서 뭘 잘못하고 있는거야? 일부터 Google+ Sign-in Button docs, data-callback에 명시된 바와 같이

감사

Answer 1

은 "글로벌 네임 스페이스의 함수"가 될 것으로 예상된다. 모든 HTML 속성은 문자열이므로 Google 코드가 콜백을 이름으로 호출하기 때문입니다. 다음과 같이 처리합니다 (실제 코드가 아닌 경고).

window[element.dataset["callbackName"]](); 

전체적으로 액세스 할 수없는 콜백에 대한 참조를 전달 중입니다. 구성 요소가 마운트 될 때이를 노출 할 수 있으며 마운트 해제시 글로벌 네임 스페이스에서 삭제할 수 있습니다.

componentWillMount: function() { 
    // Somehow generate a unique ID for every G+ button. This uses Underscore's 
    // `uniqueId` function[1]. 
    // 
    // [1] http://underscorejs.org/#uniqueId 
    this.callbackName = _.uniqueId("gPlusCallback-"); 

    window[this.callbackName] = this.signinCallback; 
}, 
componentWillUnmount: function() { 
    delete window[this.callbackName]; 
}, 
render: function() { 
    ... 
    'data-callback': this.callbackName 
    ... 
}