다른 API를 참조하는 라인을 무시하도록 jsx 컴파일러를 얻습니다.

Question

저는 React.js를 사용하여 크롬 컨텐츠 스크립트에서 구성 요소를 만듭니다.

로컬 저장소의 데이터가 변경되면 반응 구성 요소가 다시 렌더링되어야합니다. jsx 컴파일러가 크롬 API 호출에 대해 불평 물론 마운트 기능

componentDidMount: function() { 
    this.readUserInfo(); 
} 

와

readUserInfo : function() { 
    chrome.storage.onChanged.addListener(function(object changes, string areaName) { 
    this.setState({userInfo:changes["userInfo"].newValue}); 
}); 

. jsx 컴파일러에서이 줄을 무시하도록하려면 어떻게해야합니까? 예 : 바닐라 js로 둡니다.

Answer 1

대신을 시도해보십시오

componentDidMount: function() { 
    chrome.storage.onChanged.addListener(this.onChromeStorageChange) 
}, 
onChromeStorageChange: function(changes, areaName) { 
    this.setState({ userInfo:changes["userInfo"].newValue }) 
} 

나는의 바인드 반응 사용 (아마도/워드 프로세서에서 붙여 복사)이 가지고 있던 잘못된 인수 식을 제거했습니다. 구성 요소가 마운트 해제 될 때 리스너를 제거하는 것을 잊지 마십시오.