React
반응의 소품

비고

소개

props 는 부모 구성 요소에서 하위 구성 요소로 데이터와 메서드를 전달하는 데 사용됩니다.

props 에 대한 흥미로운 점

1. 그들은 불변이다.
2. 그것들은 재사용 가능한 구성 요소를 생성 할 수있게 해줍니다.

기본 예제

class Parent extends React.Component{
  doSomething(){
     console.log("Parent component");
  }
  render() {
    return <div>
         <Child 
           text="This is the child number 1"
           title="Title 1" 
           onClick={this.doSomething} />
         <Child 
           text="This is the child number 2"
           title="Title 2" 
           onClick={this.doSomething} />
      </div>
  }
}

class Child extends React.Component{
  render() {
    return <div>
       <h1>{this.props.title}</h1>
       <h2>{this.props.text}</h2>
      </div>
  }
}

위의 예에서 볼 수 있듯이 props 덕분에 재사용 가능한 구성 요소를 만들 수 있습니다.

기본 소품

defaultProps 사용하면 구성 요소 props 기본값 또는 대체 값을 설정할 수 있습니다. defaultProps 는 고정 된 소품이있는 다른 뷰에서 구성 요소를 호출 할 때 유용하지만 일부 뷰에서는 다른 값을 전달해야합니다.

통사론

ES5

var MyClass = React.createClass({
  getDefaultProps: function() {
    return {
      randomObject: {},
      ...
    };
  }
}

ES6

class MyClass extends React.Component {...}
  
MyClass.defaultProps = {
    randomObject: {},
    ...
}

ES7

class MyClass extends React.Component {  
    static defaultProps = {
        randomObject: {},
        ...
    };
}

getDefaultProps() 또는 defaultProps 의 결과는 캐쉬되어 this.props.randomObject 가 친 컴퍼넌트에 의해 지정되어 있지 않은 경우에 값을 가지는 것을 보증하기 위해서 사용됩니다.

PropType

propTypes 사용하면 구성 요소에 필요한 props 과 구성해야 할 props 을 지정할 수 있습니다. 구성 요소는 propTypes 을 설정하지 않아도 작동하지만 구성 요소를 더 읽기 쉽도록 구성하고 구성 요소를 읽는 다른 개발자에게 설명서로 사용되며 개발 중에 React가 시도 할 경우 경고합니다 설정 한 정의와 다른 유형의 소품을 설정하십시오.

일부 기본 propTypes 과 일반적으로 사용할 수있는 propTypes 은 propTypes 과 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,
  optionalSymbol: React.PropTypes.symbol

isRequired 를 propType 연결하면 해당 구성 요소의 인스턴스를 만드는 동안 해당 소품을 제공해야합니다. 필요한 propTypes 을 제공하지 않으면 구성 요소 인스턴스를 만들 수 없습니다.

통사론

ES5

var MyClass = React.createClass({
  propTypes: {
    randomObject: React.PropTypes.object,
    callback: React.PropTypes.func.isRequired,
    ...
  }
}

ES6

class MyClass extends React.Component {...}
  
MyClass.propTypes = {
    randomObject: React.PropTypes.object,
    callback: React.PropTypes.func.isRequired,
    ...
};

ES7

class MyClass extends React.Component {  
     static propTypes = {
        randomObject: React.PropTypes.object,
        callback: React.PropTypes.func.isRequired,
        ...
    };
}

더 복잡한 소품 유효성 검사

같은 방식으로 PropTypes 사용하면보다 복잡한 검증을 지정할 수 있습니다

객체 유효성 검사

...
    randomObject: React.PropTypes.shape({
        id: React.PropTypes.number.isRequired,
        text: React.PropTypes.string,
    }).isRequired,
...

객체 배열에서 유효성 검사

...
    arrayOfObjects: React.PropTypes.arrayOf(React.PropTypes.shape({
        id: React.PropTypes.number.isRequired,
        text: React.PropTypes.string,
    })).isRequired,
...

스프레드 연산자를 사용하여 소품 내려 보내기

대신에

var component = <Component foo={this.props.x} bar={this.props.y} />;

각 속성은 하나의 소품 값으로 전달 될 필요가 어디 확산 연산자 사용할 수 있습니다 ... 모든 값을 전달하는 ES6의 배열을 지원합니다. 구성 요소는 이제 이와 같이 보입니다.

var component = <Component {...props} />;

전달한 객체의 속성은 구성 요소의 소품에 복사된다는 점을 기억하십시오.

순서가 중요합니다. 나중의 속성은 이전의 속성보다 우선합니다.

 var props = { foo: 'default' };
 var component = <Component {...props} foo={'override'} />;
 console.log(component.props.foo); // 'override'

또 다른 경우는 스프레드 연산자를 사용하여 하위 구성 요소에 소품의 일부만 전달할 수 있다는 것입니다. 그런 다음 소품의 소멸 구문을 다시 사용할 수 있습니다.

어린이 구성 요소가 많은 소품을 필요로하지만 하나씩 전달하지 않으려는 경우에 매우 유용합니다.

 const { foo, bar, other } = this.props // { foo: 'foo', bar: 'bar', other: 'other' };
 var component = <Component {...{foo, bar}} />;
 const { foo, bar } = component.props
 console.log(foo, bar); // 'foo bar'

소품. 어린이 및 구성 요소 구성

구성 요소의 "하위"구성 요소는 특수 소품 인 props.children 에서 사용할 수 있습니다. 이 소품은 "구성 요소"를 함께 구성하는 데 매우 유용하며 JSX 마크 업을 DOM의 의도 된 최종 구조를보다 직관적으로 반영 할 수 있습니다.

var SomeComponent = function () {
    return (
        <article className="textBox">
            <header>{this.props.heading}</header>
            <div className="paragraphs">
                {this.props.children}
            </div>
        </article>
    );
}

나중에 컴포넌트를 사용할 때 임의의 수의 하위 요소를 포함 할 수 있습니다.

var ParentComponent = function () {
    return (
        <SomeComponent heading="Amazing Article Box" >
            <p className="first"> Lots of content </p>
            <p> Or not </p>
        </SomeComponent>
    );
}

Props.children은 구성 요소로 조작 할 수도 있습니다. props.children 은 배열 일 수도 있고 아닐 수도 있기 때문에 React는 React.Children 과 같은 유틸리티 함수를 제공합니다. 앞의 예제에서 각 단락을 자체 <section> 요소로 래핑하고 싶다면 다음을 고려하십시오.

var SomeComponent = function () {
    return (
        <article className="textBox">
            <header>{this.props.heading}</header>
            <div className="paragraphs">
                {React.Children.map(this.props.children, function (child) {
                    return (
                        <section className={child.props.className}>
                            React.cloneElement(child)
                        </section>
                    );
                })}
            </div>
        </article>
    );
}

Reps.cloneElement를 사용하여 하위 <p> 태그에서 소품을 제거합니다. 소품은 변경할 수 없으므로이 값은 직접 변경할 수 없으므로 유의하십시오. 대신 이러한 소품이없는 클론을 사용해야합니다.

또한 루프에 요소를 추가 할 때 React 가 Re レン 더하는 동안 React가 자식을 조정 하는 방법을 알고 있어야하며 루프에 추가 된 자식 요소에 전역 적으로 고유 한 key 소품을 포함시키는 것이 좋습니다.

Children 구성 요소 유형 감지

자식 구성 요소를 반복 할 때 해당 구성 요소의 유형을 아는 것이 때로는 유용합니다. children 컴포넌트를 통해 반복하기 위해서는 React Children.map util 함수를 사용할 수 있습니다 :

React.Children.map(this.props.children, (child) => {
  if (child.type === MyComponentType) {
    ...
  }
});

child 객체는 특정 구성 요소와 비교할 수있는 type 속성을 노출합니다.