ReactJs : this.props.children의 PropType은 무엇입니까?

자식을 렌더링하는 간단한 구성 요소가 있습니다.

class ContainerComponent extends Component {
  static propTypes = {
    children: PropTypes.object.isRequired,
  }

  render() {
    return (
      <div>
        {this.props.children}
      </div>
    );
  }
}

export default ContainerComponent;

질문 : 어린이 소품의 propType은 무엇이어야합니까?

객체로 설정하면 여러 자식과 함께 구성 요소를 사용할 때 실패합니다.

<ContainerComponent>
  <div>1</div>
  <div>2</div>
</ContainerComponent>

경고 : 실패 소품 유형 : 잘못된 소품 children유형의 array 공급 ContainerComponent예상 object.

배열로 설정하면 하나의 자식 만 제공하면 실패합니다.

<ContainerComponent>
  <div>1</div>
</ContainerComponent>

경고 : 실패한 prop 유형 : 예상되는 배열 인 ContainerComponent에 공급 된 오브젝트 유형의 유효하지 않은 prop 자식입니다.

자식 요소에 대해 propTypes 검사를 귀찮게하지 않아야합니까?

이와 같은 것을 사용 oneOfType하거나PropTypes.node

import PropTypes from 'prop-types'

...

static propTypes = {
    children: PropTypes.oneOfType([
        PropTypes.arrayOf(PropTypes.node),
        PropTypes.node
    ]).isRequired
}

또는

static propTypes = {
    children: PropTypes.node.isRequired,
}

나에게 그것은 구성 요소에 달려 있습니다. 필요한 것을 알고 있다면 다음을 사용하여 독점적으로 또는 여러 유형을 지정해야합니다.

PropTypes.oneOfType 

그러나 대부분 많은 유형의 자식을 가질 수있는보다 일반적인 구성 요소를 사용하면 행복합니다.

PropTypes.any

React 컴포넌트를 참조하려는 경우 찾고 있습니다.

PropTypes.element

이기는 하지만,

PropTypes.node

문자열, 숫자, 요소 또는 이러한 것들의 배열-렌더링 할 수있는 모든 것을 설명합니다. 이것이 당신에게 맞는다면 이것이 방법입니다.

PropTypes 문서 는 다음과 같습니다.

// Anything that can be rendered: numbers, strings, elements or an array
// (or fragment) containing these types.
optionalNode: PropTypes.node,

따라서 PropTypes.node객체 또는 객체 배열을 확인 하는 데 사용할 수 있습니다

static propTypes = {
   children: PropTypes.node.isRequired,
}

여기의 대답은 아이들을 정확하게 검사하는 것을 다루지 않는 것 같습니다. node와 object너무 관대, 나는 정확한 요소를 확인하고 싶어한다. 다음은 내가 사용했던 것입니다.

• oneOfType([])단일 또는 여러 자녀를 허용하는 데 사용
• 사용 shape및 arrayOf(shape({}))각각 단일 및 아이들의 배열
• 사용하여 oneOf자식 요소 자체에 대한

결국 다음과 같은 것이 있습니다.

import PropTypes from 'prop-types'
import MyComponent from './MyComponent'

children: PropTypes.oneOfType([
  PropTypes.shape({
    type: PropTypes.oneOf([MyComponent]),
  }),
  PropTypes.arrayOf(
    PropTypes.shape({
      type: PropTypes.oneOf([MyComponent]),
    })
  ),
]).isRequired

이 문제는이를보다 명확하게 파악하는 데 도움이되었습니다. https://github.com/facebook/react/issues/2979

구성 요소 유형과 정확히 일치하려면이를 확인하십시오.

MenuPrimary.propTypes = {
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(MenuPrimaryItem),
    PropTypes.objectOf(MenuPrimaryItem)
  ])
}

정확히 일부 구성 요소 유형과 일치 시키려면이를 확인하십시오.

const HeaderTypes = [
  PropTypes.objectOf(MenuPrimary),
  PropTypes.objectOf(UserInfo)
]

Header.propTypes = {
  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.oneOfType([...HeaderTypes])),
    ...HeaderTypes
  ])
}

사용자 정의 propTypes를 사용해보십시오.

 const  childrenPropTypeLogic = (props, propName, componentName) => {
          const prop = props[propName];
          return React.Children
                   .toArray(prop)
                   .find(child => child.type !== 'div') && new Error(`${componentName} only accepts "div" elements`);
 };


static propTypes = {

   children : childrenPropTypeLogic

}

깡깡이

const {Component, PropTypes} = React;

 const  childrenPropTypeLogic = (props, propName, componentName) => {
             var error;
          var prop = props[propName];
    
          React.Children.forEach(prop, function (child) {
            if (child.type !== 'div') {
              error = new Error(
                '`' + componentName + '` only accepts children of type `div`.'
              );
            }
          });
    
          return error;
    };
    
  

class ContainerComponent extends Component {
  static propTypes = {
    children: childrenPropTypeLogic,
  }

  render() {
    return (
      <div>
        {this.props.children}
      </div>
    );
  }
}



class App extends Component {
   render(){
    return (
    <ContainerComponent>
        <div>1</div>
        <div>2</div>
      </ContainerComponent>
    )
   }
}

ReactDOM.render(<App /> , document.querySelector('section'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<section />

예:

import React from 'react';
import PropTypes from 'prop-types';

class MenuItem extends React.Component {
    render() {
        return (
            <li>
                <a href={this.props.href}>{this.props.children}</a>
            </li>
        );
    }
}

MenuItem.defaultProps = {
    href: "/",
    children: "Main page"
};

MenuItem.propTypes = {
    href: PropTypes.string.isRequired,
    children: PropTypes.string.isRequired
};

export default MenuItem;

그림 : 예상되는 유형이 다른 경우 콘솔에 오류가 표시됩니다