React 튜토리얼에서 Props 검증을 사용하는 방법

이 글은 React 튜토리얼에서 Props 검증(Props Validation)의 구체적인 사용법을 주로 소개하고 있어 실용적으로 도움이 되는 친구들이 참고할 수 있습니다.

Props 검증은 컴포넌트를 올바르게 사용하는 데 매우 유용한 방법입니다. 애플리케이션이 더욱 복잡해짐에 따라 발생할 수 있는 많은 버그와 문제를 피할 수 있습니다. 또한 프로그램을 더 읽기 쉽게 만들 수 있습니다.

그렇다면 Props를 검증하는 방법은 실제로 매우 간단합니다. React는 검증을 위해 PropTypes를 제공합니다. Props에 전달한 데이터가 유효하지 않은 경우(즉, Props에 전달된 데이터 유형이 확인된 데이터 유형과 일치하지 않는 경우) 콘솔에 경고 메시지가 표시됩니다.

아래 예를 보세요

var Propsva = React.createClass({
  propTypes: {
    optionalArray: React.PropTypes.array,
    optionalBool: React.PropTypes.bool,
    optionalFunc: React.PropTypes.func,
    optionalNumber: React.PropTypes.number,
    optionalObject: React.PropTypes.object,
    optionalString: React.PropTypes.string,
  },
  getDefaultProps:function(){
    return {
      optionalArray: ['onmpw.com','——迹忆博客'],
      optionalBool: true,
      optionalFunc: function (arg) {
        console.log(arg);
      },
      optionalNumber: 3,
      optionalObject: {
        object1: "objectvalue1",
        object2: "objectvalue2",
        object3: "objectvalue3",
      },
      optionalString: "My Onmpw",
    };
  },
  render:function(){
    return (
      <p>
        <h3>Array:{this.props.optionalArray}</h3>
        <h3>Bool:{this.props.optionalBool}</h3>
        <h3 onClick={this.props.optionalFunc}>Func:click</h3>
        <h3>Number:{this.props.optionalNumber}</h3>
        <h3>Object:{this.props.optionalObject.object1}</h3>
        <h3>Object:{this.props.optionalObject.object2}</h3>
        <h3>Object:{this.props.optionalObject.object3}</h3>
        <h3>String:{this.props.optionalString}</h3>
      </p>
    );
  }
});
ReactDOM.render(
  <Propsva />,
  document.getElementById(&#39;content&#39;)
);

물론 위의 예에는 잘못된 것이 없습니다. 위의 예를 수정해 보겠습니다

getDefaultProps:function(){
  return {
    optionalArray: 'onmpw.com——迹忆博客',
    optionalBool: true,
    optionalFunc: function (arg) {
      console.log(arg);
    },
    optionalNumber: 3,
    optionalObject: {
      object1: "objectvalue1",
      object2: "objectvalue2",
      object3: "objectvalue3",
    },
    optionalString: "My Onmpw",
  };
},

그런 다음 콘솔에서 다음 경고를 찾을 수 있습니다

경고: Failed propType: `Propsva`에 제공된 `string` 유형의 잘못된 prop `ionalArray`, 예상 `array `.

Prop의 데이터 타입을 검증한 사례입니다. 또 다른 상황은 Props에 값이 있는지 확인하는 것입니다. 아래 코드를 보세요

propTypes: {
  optionalArray: React.PropTypes.array.isRequired,
  optionalBool: React.PropTypes.bool.isRequired,
  optionalFunc: React.PropTypes.func,
  optionalNumber: React.PropTypes.number,
  optionalObject: React.PropTypes.object,
  optionalString: React.PropTypes.string,
},

React.PropTypes.array와 React.PropTypes.bool 뒤에 isRequired를 추가하세요. 이는 optionArray와 optionBool에 값이 있어야 함을 나타냅니다.

getDefaultProps:function(){
  return {
    optionalFunc: function (arg) {
      console.log(arg);
    },
    optionalNumber: 3,
    optionalObject: {
      object1: "objectvalue1",
      object2: "objectvalue2",
      object3: "objectvalue3",
    },
    optionalString: "My Onmpw",
  };
},

위 코드에서 우리는 optionArray와 optionBool을 제거합니다. , 그리고 브라우저에서 코드를 실행하면 콘솔에 다음 오류가 보고됩니다.

경고: Failed propType: 필수 prop `selectiveArray`가 `Propsva`에 지정되지 않았습니다.
경고: Failed propType: 필수 prop `OptionalBool`이 `Propsva`에 지정되지 않았습니다.

물론 위의 경우는 두 가지 간단한 경우에 불과합니다. Props 검증에는 다양한 검증 방식이 있습니다. 자세한 내용은 React 공식 문서를 참조하세요.

여기에 설명해야 할 지식 포인트가 있는데, 바로 getDefaultProps입니다. 이는 Prop에 대한 기본 할당입니다. 아래 코드를 보세요

var ComponentDefaultProps = React.createClass({
  getDefaultProps: function() {
    return {
      value: 'Default Value'
    };
  },
  render:function(){
    return (
      <p>{this.props.value}</p>
    )
  }
});
ReactDOM.render(
  <ComponentDefaultProps />,
  document.getElementById(&#39;content&#39;)
);

getDefaultProps()는 상위 구성 요소가 Props를 전달하지 않을 때 현재 구성 요소에 기본 Props 값이 있음을 보장할 수 있습니다. getDefaultProps의 반환 결과가 캐시된다는 점에 유의해야 합니다. 따라서 의미없이 반복되는 코드를 수동으로 작성하지 않고도 Props를 직접 사용할 수 있습니다.

위 내용은 React 튜토리얼에서 Props 검증을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!