ReactJs: PropType'lar bunun için ne olmalıdır.

Çocuklarını oluşturan basit bir bileşen göz önüne alındığında:

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

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

export default ContainerComponent;

Soru: Çocuk propinin propTipi ne olmalı?

Bir nesne olarak ayarladığımda, bileşeni birden çok çocukla kullandığımda başarısız oluyor:

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

Uyarı: Başarısız pervane tipi: Geçersiz childrentip pervane array sağlandı ContainerComponent, bekleniyor object.

Bir dizi olarak ayarlarsanız, yalnızca bir çocuk verirseniz başarısız olur, yani:

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

Uyarı: Başarısız prop türü: ContainerComponent'e beklenen tür nesnesinin geçersiz prop alt öğeleri, beklenen dizi.

Lütfen tavsiye edin, sadece çocuk öğeleri için bir propTypes kontrolü yapmakla uğraşmamalı mıyım?

Kullanarak böyle bir şey deneyin oneOfTypeveyaPropTypes.node

import PropTypes from 'prop-types'

...

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

veya

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

Benim için bileşene bağlı. Ne ile doldurulması gerektiğini biliyorsanız, o zaman özel olarak veya aşağıdakileri kullanarak birden fazla tür belirtmeye çalışmalısınız:

PropTypes.oneOfType 

Ancak çoğunlukla, birçok çocuk türüne sahip olabilecek daha genel bileşenlerle kullanmaktan mutluluk duyuyorum:

PropTypes.any

Bir React bileşenine başvurmak istiyorsanız,

PropTypes.element

Olmasına rağmen,

PropTypes.node

işlenebilecek her şeyi tanımlar - dizeler, sayılar, elemanlar veya bunların bir dizisi. Bu size uygunsa, o zaman yol budur.

PropTypes belgeleri aşağıdakilere sahiptir

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

Böylece, PropTypes.nodenesneleri veya nesne dizilerini kontrol etmek için kullanabilirsiniz

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

Buradaki cevaplar çocukların tam olarak kontrol edilmesini kapsamıyor gibi görünüyor. nodeve objectçok izin vericiyim, tam elementi kontrol etmek istedim. İşte ben kullanarak sona erdi:

• oneOfType([])Tek veya bir dizi çocuğa izin vermek için kullanın
• Kullanım shapeve arrayOf(shape({}))sırasıyla tek ve çocukların dizisi için
• oneOfAlt öğenin kendisi için kullanın

Sonunda, böyle bir şey:

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

Bu sorun, bunu daha net bir şekilde anlamama yardımcı oldu: https://github.com/facebook/react/issues/2979

Bir bileşen türüyle tam olarak eşleşmek istiyorsanız bunu kontrol edin

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

Bazı bileşen türleriyle tam olarak eşleşmek istiyorsanız bunu kontrol edin

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

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

Özel bir prop deneyin

 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

}

Vaktini boşa harcamak

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 />

Misal:

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;

Resim: Beklenen tür farklıysa konsolda hata gösterir