【 전 창고 리 액 트 】 8 일차: 속성 유형

번역 자: iOS DevLog 링크:http://www.zcfy.cc/article/3818원문:https://www.fullstackreact.com/30-days-of-react/day-8/
우 리 는 오늘 React 구성 요 소 를 다시 사용 하 는 방법 을 고려 하고 있 습 니 다. 그러면 우 리 는 응용 할 수 있 을 뿐만 아니 라 팀 에서 우리 의 구성 요 소 를 공유 할 수 있 습 니 다.
아 이쿠!저희 가 2 주 째 했 어 요!이 를 통 해 우 리 는 React props, state, 생명주기 연결 함수, JSX 등) 의 대부분 기본 적 인 특성 에 대해 논의 했다.이 절 에서 우 리 는 우리 의 구성 요 소 를 설명 하 는 것 을 볼 것 이다.
PropTypes
구성 요소 에서 사용 되 고 있 음 을 알 수 있 습 니 다 props.대부분의 상황 에서 우 리 는 이런 것들 이 특정한 유형 이나 한 조 의 유형 object 또는 string 이 라 고 부 르 기 를 기대한다.React 는 구성 요소 API 를 쉽게 노출 할 수 있 도록 이러한 유형 을 정의 하고 검증 하 는 방법 을 제공 합 니 다.
문서 화 는 좋 은 습관 일 뿐만 아니 라 구축 에 도 유익 한 reusable react components 입 니 다.React.PropTypes 대상 은 서로 다른 유형 을 내 보 냅 니 다. 구성 요소 의 prop 가 어떤 유형 인지 정의 할 수 있 습 니 다.우 리 는 ES6 스타일 의 React prop 에서 propTypes 방법 으로 그것들 을 정의 할 수 있다.

class Clock extends React.Component {
  // ...
}

Clock.propTypes = {
  // key is the name of the prop and
  // value is the PropType
}

React.createClass() 형식 을 사용 합 니 다. 우 리 는 propTypes 의 key 형식 을 정의 합 니 다. 예 를 들 어 우 리 는 Clock 구성 요소 의 형식 을 다시 쓸 수 있 습 니 다.

const Clock = React.createClass({
  proptypes: {}
}); 

이 prop 에서 우 리 는 하나의 대상 을 정의 할 수 있 습 니 다. 이것 은 prop 의 key 를 우리 가 정의 하 는 prop 의 이름 으로 정의 해 야 할 유형 (또는 유형) 의 값 을 가지 고 있 습 니 다.
예 를 들 어 며칠 전에 우리 가 구축 한 Header 구성 요 소 는 title 라 는 속성 을 받 아들 이 고 문자열 이 기 를 바 랍 니 다.우 리 는 그 형식 을 문자열 로 정의 할 수 있 습 니 다.

class Header extends React.Component {
  // ...
}

Header.propTypes = {
  title: React.PropTypes.string
}

React 는 선택 할 수 있 는 여러 가지 유형 이 있 습 니 다. React.PropTypes 대상 에서 내 보 내 고 사용자 정의 대상 유형 을 정의 할 수 있 습 니 다.사용 가능 한 유형의 전체 목록 보기:
[] (\ # basic - types) 기본 유형
React 는 우리 가 상 자 를 열 수 있 는 몇 가지 기본 유형 을 폭로 했다.
유형
예시
종류
String
'hello' React.PropTypes.string
Number
10, 0.1 React.PropTypes.number
Boolean
true / false React.PropTypes.bool
Function const say => (msg) => console.log("Hello world") React.PropTypes.func
Symbol
Symbol("msg") React.PropTypes.symbol
Object {name: 'Ari'} React.PropTypes.object
Anything
'whatever', 10, {}
React 에 게 전달 하고 싶다 고 말 할 수 있 습 니 다anything_React.PropTypes.node 을 사용 하여 표시 할 수 있 습 니 다.
유형
예시
종류
A rendererable
10, 'hello' React.PropTypes.node

Clock.propTypes = {
  title: React.PropTypes.string,
  count: React.PropTypes.number,
  isOn: React.PropTypes.bool,
  onDisplay: React.PropTypes.func,
  symbol: React.PropTypes.symbol,
  user: React.PropTypes.object,

  name: React.PropTypes.node
}

우 리 는 부모 구성 요소 에서 하위 구성 요소 로 통신 하 는 방법 을 이미 보 았 다.우 리 는 함수 로 하위 구성 요소 에서 부모 구성 요소 로 통신 할 수 있다.하위 구성 요소 의 부모 구성 요 소 를 조작 하려 면 이 모드 를 자주 사용 합 니 다.
집합 유형
우 리 는 우리 의 props 중의 교체 가능 한 집합 을 통과 할 수 있다.우리 가 우리 의 활동 을 통 해 하나의 배열 을 통과 할 때, 우 리 는 이미 이 점 을 어떻게 하 는 지 보 았 다.구성 요소 의 proptype 을 배열 로 설명 하려 면 props 주 해 를 사용 할 수 있 습 니 다.
우 리 는 배열 에 특정한 유형의 대상 만 사용 하도록 요구 할 수 있다 React.PropTypes.array.
유형
예시
종류
Array
[] React.PropTypes.arrayOf([])
Array of numbers
[1, 2, 3] React.PropTypes.array
Enum
['Red', 'Blue'] React.PropTypes.arrayOf([type])
몇 가지 서로 다른 유형의 대상 중 하나 라 고 설명 할 수 있다 React.PropTypes.oneOf([arr]).

Clock.propTypes = {
  counts: React.PropTypes.array,
  users: React.PropTypes.arrayOf(React.PropTypes.object),
  alarmColor: React.PropTypes.oneOf(['red', 'blue']),
  description: React.PropTypes.oneOfType([
      React.PropTypes.string,
      React.PropTypes.instanceOf(Title)
    ]),
}

대상 유형
특정한 유형의 특정한 유형 이나 인 스 턴 스 가 필요 한 유형 을 정의 할 수 있 습 니 다.
유형
예시
종류
Object React.PropTypes.oneOfType([types]) {name: 'Ari'}
Number object React.PropTypes.object {count: 42}
Instance React.PropTypes.objectOf() new Message()
Object shape React.PropTypes.objectOf() {name: 'Ari'}

Clock.propTypes = {
  basicObject: React.PropTypes.object,

  numbers: React.PropTypes
    .objectOf(React.PropTypes.numbers),

  messages: React.PropTypes
    .instanceOf(Message),

  contactList: React.PropTypes.shape({
    name: React.PropTypes.string,
    phone: React.PropTypes.string,
  })
}

반응 유형
우리 도 React 요 소 를 통 해 부모 구성 요소 에서 하위 구성 요소 로 갈 수 있 습 니 다.이것 은 템 플 릿 을 구축 하고 템 플 릿 을 제공 하 는 맞 춤 형 제작 에 매우 유용 하 다.
유형
예시
종류
Element React.PropTypes.shape()