이 글은 사실 주요 내용이 모두 공식 문서상의 원시적인 예이다. 그러나 왜 나는 또 써야 하는가? 첫째, 나 자신에게 필기를 하기 위해서, 둘째는...공식 문서 시리즈를 안 보고 죽어라 (예를 들어 나)
개시하다
prop-types의 주요 역할: props의 데이터 유형에 대한 검측 및 제한
참조 방법: import PropTypes from 'prop-types'사용법:

//              
componentsName.PropTypes = {
        : PropTypes.  
}
//   
myComponents.PropTypes = {
    name: Proptypes.string
}

(공식 문서 원례)

기본 데이터 유형 지정

MyComponent.propTypes = {
    //             JS     
    optionalArray: PropTypes.array,
    optionalBool: PropTypes.bool,
    optionalFunc: PropTypes.func,
    optionalNumber: PropTypes.number,
    optionalObject: PropTypes.object,
    optionalString: PropTypes.string,
    optionalSymbol: PropTypes.symbol,
}

렌더링될 수 있는 요소인지 검사하면function이 렌더링될 수 없음

MyComponent.propTypes = {
 //          （    、   、      ）。
  optionalNode: PropTypes.node,   
}

원형의 실례인지 검사

MyComponent.propTypes = {
    optionalMessage: PropTypes.instanceOf(Message),
}

특정한 내용을 제한한다. 뉴스나 포토스

만 가능하다.

MyComponent.propTypes = {
    //                    
    optionalEnum: PropTypes.oneOf(['News', 'Photos']),
}

일정한 범위 내의 유형은string,number, 실례

일 수 있다.

MyComponent.propTypes = {
    //              
    optionalUnion: PropTypes.oneOfType([
        PropTypes.string,
        PropTypes.number,
        PropTypes.instanceOf(Message)
    ]),
}

모든 내용 형식의 그룹을 지정합니다. 그룹의 모든 내용은number 형식이어야 합니다

MyComponent.propTypes = {
   //            
  optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
}

요소 유형을 지정하는 대상 - 대상의 내용은number

여야 합니다

MyComponent.propTypes = {
    //          
    optionalObjectOf: PropTypes.objectOf(PropTypes.number),
}

속성과 유형을 지정하는 대상인color는string 형식이어야 하고 fontSize는number 형식

이어야 한다.

MyComponent.propTypes = {
    //              
    optionalObjectWithShape: PropTypes.shape({
     color: PropTypes.string,
     fontSize: PropTypes.number
    }),
}

콘텐츠의 존재 여부를 감지합니다. 없으면 경고 메시지가 인쇄됩니다

.

MyComponent.propTypes = {
    //         PropTypes        `isRequired` 
    //   ，                ，       
    requiredFunc: PropTypes.func.isRequired,

}

모든 데이터 유형-모든 유형은 가능하지만 내용은 존재해야 한다

MyComponent.propTypes = {
    //        
    requiredAny: PropTypes.any.isRequired,

}

사용자 정의 검증기

MyComponent.propTypes = {
   //               。           
  //    Error       `console.warn`      。
  //     `oneOfType`       。
  customProp: function(props, propName, componentName) {
    if (!/matchme/.test(props[propName])) {
      return new Error(
        'Invalid prop `' + propName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  },
    //               `arrayOf`   `objectOf` 
  //    ，              Error   。    
  //             。               
  //      ，          。
  customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
    if (!/matchme/.test(propValue[key])) {
      return new Error(
        'Invalid prop `' + propFullName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  })
}

요소 - 1.react 요소입니다.원소가 존재하고 하나의 하위세대인지 검사

//    react  
MyComponent.propTypes = {
  optionalElement: PropTypes.element,
}
//            
MyComponent.propTypes = {
  optionalElement: PropTypes.element.isRequired,
}

속성 기본값 - 기본값 추가

class Greeting extends React.Component {
  render() {
    return (
      
Hello, {this.props.name}
    );
  }
}

//         :
Greeting.defaultProps = {
  name: 'Stranger'
};

//    "Hello, Stranger":
ReactDOM.render(
  ,
  document.getElementById('example')
);

//             
static defaultProps = {
    name: 'stranger'
  }

궁금한 것이 있으면 평론해 주십시오. 제가 보면 즉시 회답할 것입니다.