programing

React PropTypes: 하나의 프로포트에 대해 다양한 유형의 PropType 허용

batch 2023. 3. 17. 19:42
반응형

React PropTypes: 하나의 프로포트에 대해 다양한 유형의 PropType 허용

크기만큼 소품을 받는 부품이 있습니다.프롭은 문자열 또는 숫자 ex 중 하나입니다."LARGE"또는17.

허락해도 될까요?React.PropTypes이것이 propType 검증의 어느 쪽이든 될 수 있다는 것을 알고 계십니까?

유형을 지정하지 않으면 경고가 표시됩니다.

지주형size유효하지 않습니다. 보통 React의 함수여야 합니다.PropTypes.

MyComponent.propTypes = {
    size: React.PropTypes
}
size: PropTypes.oneOfType([
  PropTypes.string,
  PropTypes.number
]),

상세:PropTypes를 사용한 형식 검사

문서화를 위해 유효한 문자열 값을 나열하는 것이 좋습니다.

size: PropTypes.oneOfType([
    PropTypes.number,
    PropTypes.oneOf([ 'SMALL', 'LARGE' ]),
]),

다음과 같이 하면 도움이 될 수 있습니다.

height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),

다음은 다중 프로프토타입과 단일 프로프토타입의 사용 예시입니다.

import React, { Component } from 'react';
import { string, shape, array, oneOfType } from 'prop-types';

class MyComponent extends Component {
  /**
   * Render
   */
  render() {
    const { title, data } = this.props;

    return (
      <>
        {title}
        <br />
        {data}
      </>
    );
  }
}

/**
 * Define component props
 */
MyComponent.propTypes = {
  data: oneOfType([array, string, shape({})]),
  title: string,
};

export default MyComponent;

import React from 'react';              <--as normal
import PropTypes from 'prop-types';     <--add this as a second line

    App.propTypes = {
        monkey: PropTypes.string,           <--omit "React."
        cat: PropTypes.number.isRequired    <--omit "React."
    };

    Wrong:  React.PropTypes.string
    Right:  PropTypes.string

언급URL : https://stackoverflow.com/questions/41808428/react-proptypes-allow-different-types-of-proptypes-for-one-prop

반응형