반응형
클래스 확장 React.Component는 React에서 getInitialState를 사용할 수 없습니다.
React에서 ES6 구문을 트링하고 다음과 같은 구성 요소를 작성합니다.
export default class Loginform extends React.Component {
getInitialState() {
return {
name: '',
password: ''
};
};
}
하지만 브라우저는 다음과 같은 경고를 표시합니다.
경고 : getInitialState는 일반 JavaScript 클래스 인 Loginform에 정의되었습니다. 이는 React.createClass를 사용하여 생성 된 클래스에 대해서만 지원됩니다. 대신 상태 속성을 정의하려고 했습니까?
전통적인 구문으로 처리 할 수 var Loginform = React.createClass
있지만 올바른 ES6 구문은 무엇입니까?
또 다른 작은 점은 전통적인 구문 React.createClass
에서 객체 라고 생각 하므로 그 안의 함수는 쉼표로 구분되지만 extends
클래스에서는 세미콜론이 필요하므로 잘 이해하지 못합니다.
ES6 클래스 메서드 선언 사이에 세미콜론이나 쉼표가 필요하지 않습니다.
ES6 클래스의 getInitialState
경우 생성자에서 초기 상태 객체를 선언하기 위해 더 이상 사용되지 않습니다.
export default class Loginform extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
name: '',
password: ''
};
};
}
ES6 예제 : state, defaultProps, propTypes
import React from 'react'
import ReactDom from 'react-dom';
export default class Item extends React.Component{
constructor(props){
super(props);
this.state = {
check:false,
};
this.click=this.click.bind(this);
}
click(){
this.setState({check:true});
}
render(){
const text=this.state.check?'yes':'no';
return(<div onClick={this.click}>{this.props.name} : <b>{text}</b></div>)
}
}
Item.defaultProps={
comment:"default comment",
};
Item.propTypes={
name:React.PropTypes.string.isRequired,
};
클래스 필드를 사용하면 다음과 같이 작동합니다.
state = {
name: '',
password: ''
}
대신 사용할 수 있습니다.
constructor(props, context) {
super(props, context);
this.state = {
name: '',
password: ''
};
};
반응형
'developer tip' 카테고리의 다른 글
객체의 속성 중 최소 / 최대 값을 얻는 빠른 방법 (0) | 2020.10.14 |
---|---|
일괄 적으로 base64 디코딩 (0) | 2020.10.14 |
jQuery UI 대화 상자에서 '제목'을 업데이트하는 방법은 무엇입니까? (0) | 2020.10.14 |
iPhone Store Kit "iTunes Store에 연결할 수 없습니다" (0) | 2020.10.14 |
레일에서 단일 호출로 여러 개체 저장 (0) | 2020.10.14 |