React 구성 요소 의 this 구체 적 인 사용
간단 한 구성 요 소 를 만 들 고 렌 더 링 을 통 해 사용자 정의 함수 와 render 의 this 를 각각 출력 합 니 다.
import React from 'react';
const STR = ' ，this ：';
class App extends React.Component{
constructor(){
super()
}
//
handler() {
console.log(`handler ${STR}`,this);
}
render(){
console.log(`render ${STR}`,this);
return(
<div>
<h1>hello World</h1>
<label htmlFor = 'btn'> handler this </label>
<input id = "btn" type="button" value = ' ' onClick = {this.handler}/>
</div>
)
}
}
export default App
render 함수 의 this 는 구성 요소 인 스 턴 스 를 가리 키 고 handler()함수 의 this 는 undefined 입 니 다.왜 그런 가요?
JavaScript 함수 의 this
자 바스 크 립 트 함수 중의 this 는 함수 가 성명 할 때 정 의 된 것 이 아니 라 함수 호출(즉 실행)할 때 정 의 된 것 임 을 잘 알 고 있 습 니 다.
var student = {
func: function() {
console.log(this);
};
};
student.func();
var studentFunc = student.func;
studentFunc();이 코드 이미지 가 검증 되 었 습 니 다.JavaScript 함수 중의 this 는 함수 가 설명 할 때 가 아니 라 함수 가 실 행 될 때 정 의 됩 니 다.
마찬가지 로 React 구성 요소 도 JavaScript 의 이러한 특성 을 따 르 기 때문에 구성 요소 방법의'호출 자'에 따라 this 가 다 를 수 있 습 니 다.(여기 서'호출 자'는 함수 가 실 행 될 때의 현재 대상 을 말 합 니 다)
"호출 자"가 다 르 면 this 가 달라 집 니 다.
테스트:구성 요소 자체 의 생명주기 함수 와 사용자 정의 함수 에 각각 this 를 인쇄 하고 render()방법 에 각각 this.handler(),window.handler(),onCilck={this.handler}이 세 가지 방법 으로 handler()를 호출 합 니 다.
/App.jsx
//
handler() {
console.log(`handler ${STR}`,this);
}
render(){
console.log(`render ${STR}`,this);
this.handler();
window.handler = this.handler;
window.handler();
return(
<div>
<h1>hello World</h1>
<label htmlFor = 'btn'> handler this </label>
<input id = "btn" type="button" value = ' ' onClick = {this.handler}/>
</div>
)
}
}
export default App
볼 수 있 습 니 다:
/index.js
import React from 'react'
import {render,unmountComponentAtNode} from 'react-dom'
import App from './App.jsx'
const root=document.getElementById('root')
console.log(" ");
let instance = render(<App />,root);
window.renderComponent = () => {
console.log(" ");
instance = render(<App />,root);
}
window.setState = () => {
console.log(" ");
instance.setState({foo: 'bar'});
}
window.unmountComponentAtNode = () => {
console.log(' ');
unmountComponentAtNode(root);
}/index.html
<!DOCTYPE html>
<html>
<head>
<title>react-this</title>
</head>
<body>
<button onclick="window.renderComponent()"> </button>
<button onclick="window.setState()"> </button>
<button onclick="window.unmountComponentAtNode()"> </button>
<div id="root">
<!-- app -->
</div>
</body>
</html>
1.render()와 componentDIdMount(),componentDIdUpdate()등 다른 수명 주기 함수 중의 this 는 모두 구성 요소 인 스 턴 스 입 니 다.
2.this.handler()의 호출 자 는 render()의 this 이기 때문에 구성 요소 인 스 턴 스 를 인쇄 합 니 다.
3.window.handler()의"호출 자"는 window 이기 때문에 window 를 인쇄 합 니 다.
4.onClick={this.handler}의"호출 자"는 이벤트 바 인 딩 입 니 다.원본 이 다양 합 니 다.undefined 를 인쇄 합 니 다.
-이렇게 혼 란 스 러 운 장면 에 직면 하여 onClick 에서 사용자 정의 구성 요소 방법 을 호출 하고 이 방법 에서 그룹 이 인 스 턴 스 를 가 져 오 려 면 컨 텍스트 즉 컨 텍스트 를 바 꾸 어야 합 니 다.
자동 귀속 과 수 동 귀속
import React from 'react';
const STR = ' ，this ：';
class App extends React.Component{
constructor(){
super();
this.handler = this.handler.bind(this);
}
//
handler() {
console.log(`handler ${STR}`,this);
}
render(){
console.log(`render ${STR}`,this);
this.handler();
window.handler = this.handler;
window.handler();
return(
<div>
<h1>hello World</h1>
<label htmlFor = 'btn'> handler this </label>
<input id = "btn" type="button" value = ' ' onClick = {this.handler}/>
</div>
)
}
}
export default App요약:
React 구성 요소 수명 주기 함수 의 this 지향 구성 요소 인 스 턴 스;
구성 요소 방법 을 사용자 정의 하 는 this 는 호출 자 에 따라 다 릅 니 다.
구성 요소 의 사용자 정의 방법 에서 구성 요소 인 스 턴 스 를 가 져 오기 위해 서 는 this 를 그룹 에 수 동 으로 연결 하여 인 스 턴 스 를 사용 해 야 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
바삭바삭하고 간단한 결제 페이지 만들기먼저 Next.js에서 프로젝트를 만듭니다. Vercel & Next.js가 매우 편하기 때문에 최근에는이 구성을 사용하고 있습니다. 그런 다음 Tailwind CSS를 넣습니다. Tailwind CSS를 사용하면 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
