리액트 J:this.props.children의 PropType은 무엇입니까?

리액트 J: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>

경고: 실패한 소품 유형:ContainerComponent에 제공된 개체 유형의 소품 하위 항목이 잘못되었습니다. 어레이가 필요합니다.

자녀 요소에 대한 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 

React 컴포넌트를 참조하려면 다음 항목을 참조해야 합니다.

PropTypes.element

비록 ~일지라도,

PropTypes.node

에 렌더링 가능한 문자열, 숫자, 요소 또는 이러한 요소의 배열에 대해 설명합니다.이게 괜찮으시다면 이쪽입니다.

다양한 타입의 아이를 가질 수 있는 매우 범용적인 컴포넌트에서는, 이하를 사용할 수도 있습니다.하지만 나는 그것을 추천하지 않을 것이다.아래 코멘트에서 언급했듯이, 이것은 사용의 요점을 다소 약화시킨다.PropTypes컴포넌트에 필요한 것을 지정하는 다른 방법이 있습니다.또한 eslint와 ts는 이러한 명확성의 결여에 만족하지 못할 수도 있습니다.

PropTypes.any

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
  ])
}

렌더 소품 구성요소를 포함하려는 경우:

  children: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.node),
    PropTypes.node,
    PropTypes.func
  ])

커스텀 propType을 시험합니다.

 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;

그림:예상 유형이 다를 경우 콘솔에 오류를 표시합니다.

propTypes 문서 참조 element요소에 되며, 도 그중 입니다.React는 반응합니다.

// A React element.
optionalElement: PropTypes.element,

다음 그, 것, 것, 것, 것, 습, 습, 습, 습, 습, 습, 습, then, then, then, then, then.arrayOf

Component.propTypes = { 하위: PropTypes.arrayOf(PropTypes.element).필수, };

의 '1'이 합니다.children.

언급URL : https://stackoverflow.com/questions/42122522/reactjs-what-should-the-proptypes-be-for-this-props-children