bestsource

ReactJs에서 null 프로펠러 유형을 지정하는 방법

bestsource 2023. 2. 9. 22:01
반응형

ReactJs에서 null 프로펠러 유형을 지정하는 방법

ReactJS 컴포넌트에 null 또는 불변 맵이 있는 프로펠러가 있습니다.

위젯 하단에 다음과 같이 적습니다.

MyComponent.propTypes = {
    myMap: React.PropTypes.instanceOf(Immutable.Map)
};

나는 이것을 null, 정의되지 않은, 또는 지도의 가능성에 열어두겠다.

필수 유형으로 null 또는 map 전용으로 하려면 어떻게 해야 합니까?

https://facebook.github.io/react/docs/typechecking-with-proptypes.html

이 예에서는 구문을 자신의 요구에 맞게 조정하는 방법이나 가능한지를 알 수 없습니다.

편집: 속성이 null인 경우 속성은 아직 존재하지만 정의되지 않았음을 의미합니다.

예를 들어 다음과 같습니다.

<Component id={1} data={null} />
<Component id={2} data={Immutable.Map()} />
<Component id={3} />

사용할 수 있습니다.PropTypes.oneOf([null]).isRequired. null만 허용됩니다.다른 타입과 조합할 수 있습니다.

PropTypes.oneOfType([
  PropTypes.string.isRequired,
  PropTypes.oneOf([null]).isRequired,
]).isRequired

편집: 프로펠러 타입 15.7.2를 사용한 늘프롭이 주어졌을 때 이 프로펠러 타입이 고장났기 때문에, 이 프로펠러 타입이 제대로 기능하는지는 알 수 없습니다.isRequired를 사용하지 않음으로써 정의되지 않은 것과 늘을 모두 허용하는 것으로 되돌렸습니다.

저도 비슷한 문제가 있어서 이렇게 오게 됐어요.나에게 맞는 해결책을 찾았으니 공유하는 게 낫겠다.

요컨대, 저는.isRequired및 세트defaultProps로.null.

난 이런 걸 원했어

// this won't work, because `PropTypes.null` doesn't exists!
MyComponent.propTypes = {
  item: PropTypes.oneOfType([ItemPropTypesShape, PropTypes.null]).isRequired,
};

// this also won't work!
MyComponent.propTypes = {
  item: PropTypes.oneOfType([ItemPropTypesShape, PropTypes.instanceOf(null)]).isRequired,
};

null은 프로포트가 필요한 경우 항상 오류로 처리됩니다.

결국 이렇게 됐어요.

MyComponent.propTypes = {
  item: ItemPropTypesShape,
};

MyComponent.defaultProps = {
  item: null,
};

PropTypes만 있으면 됩니다.

이 요건은 현재 버전의 React에서는 지원되지 않는 것 같습니다.

자세한 내용은 문제 2166을 참조하십시오.이 문제에서는 다음 문제의 가능성에 대해 설명합니다.isRequiredOrNull에 가세해 재산isRequired. 결론:

PropTypes에 더 이상의 변경은 기대하지 않습니다.최근 플로우가 많이 성숙해져서 React 팀으로부터 들은 바로는 타입 체크에 대한 장기 솔루션이라고 합니다.따라서 PropTypes는 createClass 또는 React 애드온과 같은 우선 순위 측면에서 동일한 "호환성" 버킷에 포함되지만 새로운 기능을 추가하거나 API를 변경하지 않고 버그 수정 및 성능 향상을 통해서만 지원됩니다.

즉, 보다 고도의 타입 체크를 필요로 하는 경우는, 대신Flow 를 사용합니다.

그런 것 같다PropTypes.instanceOf(null)작동하다.

  • 반응 @16.8
  • prop-types@15.6

소품 타입은 다음 없이 사용할 수 있습니다..isRequired.

MyComponent.propTypes = {
    name: PropTypes.string
}

①을 합니다.null의 값defaultProps

MyComponent.defaultProps = {
    name: null
}

너무 늦은 감이 있지만, 이 작업은 커스텀 프로펠러 타입입니다.react documents 자세한 내용은 https://reactjs.org/docs/typechecking-with-proptypes.html#proptypes 를 참조하십시오.

static propTypes = {
  myMap: function(props, propName, componentName) {
    if (props[propName] !== null && !(props[propName] instanceof Immutable.Map)) {
      return new Error(
        'Invalid prop `' + propName + '` supplied to `' + componentName + '`. Expected null or Immutable.Map, but received ' + typeof props[propName] + '. Validation failed.'
      )
    }
  },
}

이 일반적인 문제를 해결하기 위해 better-prop-types라는 깔끔하고 완전한 타입의 래퍼를 만들었습니다.

import BetterPropTypes from 'better-prop-types'

// ...

MyComponent.propTypes = {
  myMap: BetterPropTypes.PropTypes.instanceOf(Immutable.Map).isRequiredButNullable
}
PropTypes.shape({ current: PropTypes.object })

언급URL : https://stackoverflow.com/questions/40729634/how-to-specify-null-prop-type-in-reactjs

반응형