programing

리액트 linter Airbnb proptypes 어레이

powerit 2023. 3. 29. 21:56
반응형

리액트 linter Airbnb proptypes 어레이

다음과 같은 것이 있습니다.PropTypes:

SmartTable.propTypes = {
  name: React.PropTypes.string.isRequired,
  cols: React.PropTypes.array.isRequired,
  rows: React.PropTypes.array.isRequired,
};

하지만 린터가 말하길

Prop type "array" is forbidden, 어떻게 변경할 수 있습니까?

이에 대한 가능한 해결책(단, 스마트하지 않다고 생각합니다)

SmartTable.propTypes = {
  name: React.PropTypes.string.isRequired,
  cols: React.PropTypes.arrayOf(React.PropTypes.string),
  rows: React.PropTypes.arrayOf(React.PropTypes.string),
};

나에게 효과가 있었던 솔루션 중 하나는 다음과 같습니다.

어레이를 원하는 경우:

SmartTable.propTypes = {
  name: PropTypes.string.isRequired,
  cols: PropTypes.instanceOf(Array),
  rows: PropTypes.instanceOf(Array),
};

오브젝트 및 어레이에는 다음과 같은 것이 있습니다.

SmartTable.propTypes = {
  name: PropTypes.string.isRequired,
  cols: PropTypes.instanceOf(Object),
  rows: PropTypes.instanceOf(Array),
};

콜과 행의 배열이 도형을 사용하고 싶은 오브젝트라면 이렇게 될 수 있습니다.

    SmartTable.propTypes = {
      name: PropTypes.string.isRequired,
      cols: PropTypes.arrayOf(PropTypes.shape({
        id: PropTypes.string.isRequired,
        value: PropTypes.string,
       })
      rows: PropTypes.arrayOf(PropTypes.shape({
        id: PropTypes.string.isRequired,
        value: PropTypes.string,
       })
};

쇼트 버전:

어레이용PropTypes.shape([])

오브젝트용PropTypes.shape({})

어레이 금지 에러를 회피하는 다른 방법도 찾았습니다.

PropTypes.arrayOf(PropTypes.any.isRequired).isRequired

코멘트 eslint-disable-line을 추가합니다.

someVal: PropTypes.array, // eslint-disable-line

언급URL : https://stackoverflow.com/questions/41771217/react-linter-airbnb-proptypes-array

반응형