React 및 Chrome 확장을 어려운 방법으로 배우기 때문에 this.url두 가지 값 중 하나가 있습니다.
null 또는 www.sample.com
비동기 호출에서 URL 값을 chrome.storage.local.get(...)얻었으므로 저장소에서 응답을 받으면 값을 this.url로 설정하고 이러한 값을 사용하여 다음과 같이 삼항 연산자를 사용하여 구성 요소를 표시하고 싶습니다.
export default React.createClass({
url: '',
componentDidMount: function(){
this.observeResource();
},
observeResource(){
var self = this
function getValue(callback){
chrome.storage.local.get('xxxx', callback);
}
getValue(function (url) {
this.url = url.xxxx;
return this.url;
});
},
/* RENDER */
render: function(){
return (
<div className="app">
<AppHeader />
{this.url != null ?
<VideoFoundOverlay />
: null}
{this.url == null ?
<VideoNotFoundOverlay />
: null }
</div>
)
}
});
함수 this.url외부의 값을 얻을 수 없습니다 observeResource. 내가 어디로 잘못 가고 있습니까?
콜백이 함수로 호출되기 때문에 this다음 호출 의 내부는 window구성 요소 자체 가 아니라 window실제로 함수 의 "소유자"를 가리 킵니다 .
getValue(function (url) {
this.url = url.newswireStoryUrl;
return this.url;
});
이 오류를 방지하려면, 당신은 사용할 수있는 self.url명시 적으로 지정했기 때문에, 대신 this에 self. 또는 Arrow Function대신 사용할 수 있습니다 function(...).
구성 요소를 렌더링하려면 url상태 변경 만 render함수가 호출 되기 때문에 상태로 선언해야합니다 .
export default React.createClass({
getInitialState: function() {
return { url: '' };
},
componentDidMount: function(){
this.observeResource();
},
observeResource(){
var self = this;
function getValue(callback){
chrome.storage.local.get('newswireStoryUrl', callback);
}
getValue(function (url) {
self.setState({ url: url.newswireStoryUrl });
return self.state.url;
});
},
/* RENDER */
render: function(){
return (
<div className="app">
<AppHeader />
{this.state.url !== null ?
<VideoFoundOverlay />
: null}
{this.state.url === null ?
<VideoNotFoundOverlay />
: null }
</div>
);
}
});
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다