react 형식 검사 (PropTypes)

형식 검사 시 구성 요소 에 불필요 한 데이터 형식 이 들 어 오지 않도록 불필요 한 bug 가 발생 합 니 다.다음은 PropTypes 를 배 울 때의 노트 입 니 다.
js 형식 으로 선언

  optionalArray: PropTypes.array,//  
  optionalBool: PropTypes.bool,//  
  optionalFunc: PropTypes.func,//function
  optionalNumber: PropTypes.number,//  
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,

render 가 될 수 있 는 모든 유형 으로 설명 할 수 있 습 니 다.

optionalElement: PropTypes.element,

특정한 사례 로 성명 한다.

optionalMessage: PropTypes.instanceOf(Message),

사용 매 거 한정

optionalEnum: PropTypes.oneOf(['News', 'Photos'])

object 를 다양한 유형 으로 한정 합 니 다.

  optionalUnion: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Message)
  ]),

특정한 배열 유형

optionalArrayOf: PropTypes.arrayOf(PropTypes.number),

특정한 Object 유형

optionalObjectOf: PropTypes.objectOf(PropTypes.number)

isRequired 를 사용 하여 위의 모든 검 사 를 실현 할 수 있 습 니 다.

requiredFunc: PropTypes.func.isRequired,

function 사용
검사 기 를 사용자 정의 하기 위해 function 을 사용 할 수 있 습 니 다. 검사 에 실 패 했 을 때 Error object 형식의 오 류 를 되 돌려 야 합 니 다. 다음 과 같다.

  customProp: function(props, propName, componentName) {
    if (!/matchme/.test(props[propName])) {
      return new Error(
        'Invalid prop `' + propName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  },

기본 props 값 설정 사용 구성 요소. defaultProps = {} 문법 예 를 들 어 아래:

class Greeting extends React.Component {
  render() {
    return (
      Hello, {this.props.name}
    );
  }
}
Greeting.defaultProps = {
  name: 'Stranger'
};

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

nginx 에서 사이트 아이콘 표시 설정

전단 개발 환경: react：^16.4.1 webpack：^4.16.0 웹 팩 에 favicon. ico 설정 추가: nginx 는 ico 에 대한 지원 을 추가 합 니 다:...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

react 형식 검사 (PropTypes)

Hello, {this.props.name}

좋은 웹페이지 즐겨찾기