ReactJS 3일차
propTypes 구성 요소의 속성 값이 요구 사항을 충족하는지 확인
var Test = React.createClass({
PropTypes: {
title: React.PropTypes.string.isRequired
},
render: function() {
return (
{this.props.title}
)
}
});
var titleData = 111;
ReactDOM.render(
,
document.querySelector('#display')
);
반응 주의.PropTypes는 대문자로 시작합니다.
ref 실제 DOM
ref="refName" 속성, 획득 시 사용this.refs.refName 실제 DOM 획득this.refs.refName 가상 DOM을 문서에 삽입한 후에 사용해야 합니다. 그렇지 않으면 오류가 발생합니다state 상태기
getInitialState 초기화 상태에 사용되며, 이 대상은 this.state를 통해 얻을 수 있으며, 따라서 대상의 속성도 this.state. 를 통해 얻을 수 있다this.setState()를 통해 상태 값을 수정하고 수정할 때마다this를 자동으로 호출합니다.render () 메서드 어셈블리 다시 렌더링 state와props의 차이
구성 요소의 특성을 설명하는 데 사용되며,
this.props 정의되면 변하지 않는 특성을 나타내고, this.state 사용자의 상호작용에 따라 변화하는 특성을 나타낸다.양식과 onChange, setState, event.target.value 구현값 동기화
입력 상자에 실시간으로 입력한 값은this를 사용할 수 없습니다.props.이벤트를 통해 onChange 이벤트의 리셋 함수를 정의합니다.target.value 사용자가 입력한 값을 읽습니다.textarea 원소,select 원소,radio 원소는 모두 이런 상황에 속한다
var MyInput = React.createClass({
getInitialState: function() {
return {
value: "input some words here"
};
},
inputHandleChange: function(e) {
this.setState({
value: e.target.value
});
},
render: function() {
return (
{this.state.value}
);
}
});
ReactDOM.render(
,
document.querySelector('#display')
);
라이프 사이클
라이프 사이클의 세 가지 상태
라이프 사이클 호출 방법:
어셈블리 스타일
style="opacity:{this.state.opacity};"
style={{opacity: this.state.opacity}}
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
