ReactJs: Jakie powinny być PropTypes dla this.props.children?

Biorąc pod uwagę prosty komponent, który renderuje jego dzieci:

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

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

export default ContainerComponent;

Pytanie: Jaki powinien być typ prop dla dzieci?

Gdy ustawię go jako obiekt, nie powiedzie się, gdy użyję komponentu z wieloma elementami potomnymi:

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

Ostrzeżenie: Niepowodzenie typu podpory: Nieprawidłowy childrentyp podpory array dostarczony do ContainerComponent, oczekiwany object.

Jeśli ustawię go jako tablicę, zakończy się niepowodzeniem, jeśli dam mu tylko jedno dziecko, tj .:

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

Ostrzeżenie: Niepowodzenie typu rekwizytu: Niepoprawne obiekty potomne rekwizytów typu obiektu dostarczone do obiektu ContainerComponent, oczekiwana tablica.

Radzę, czy powinienem po prostu nie zawracać sobie głowy sprawdzaniem propTypes elementów potomnych?

Spróbuj czegoś takiego przy użyciu oneOfTypelubPropTypes.node

import PropTypes from 'prop-types'

...

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

lub

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

Dla mnie to zależy od komponentu. Jeśli wiesz, czego potrzebujesz, aby go wypełnić, powinieneś spróbować określić wyłącznie lub wiele typów, używając:

PropTypes.oneOfType 

Jednak głównie uważam, że z bardziej ogólnymi komponentami, które mogą mieć wiele rodzajów dzieci, chętnie używam:

PropTypes.any

Jeśli chcesz odwołać się do komponentu React, będziesz szukał

PropTypes.element

Mimo że,

PropTypes.node

opisuje wszystko, co można renderować - ciągi, liczby, elementy lub tablicę tych rzeczy. Jeśli ci to odpowiada, to właśnie tak.

Dokumentacja PropTypes zawiera następujące elementy

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

Możesz więc użyć PropTypes.nodedo sprawdzenia obiektów lub tablic obiektów

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

Odpowiedzi tutaj wydają się nie obejmować dokładnie sprawdzania dzieci. nodeiobject są zbyt pobłażliwi, chciałem sprawdzić dokładny element. Oto, co wykorzystałem:

• Posługiwać się oneOfType([]) aby zezwolić na jedno lub szereg dzieci
• Użyj shapeiarrayOf(shape({})) na tablicy pojedyncze i dzieci, odpowiednio
• Użyj oneOfdla samego elementu potomnego

Na koniec coś takiego:

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

Ten problem pomógł mi to lepiej zrozumieć: https://github.com/facebook/react/issues/2979

Jeśli chcesz dokładnie dopasować typ komponentu, zaznacz to

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

Jeśli chcesz dokładnie dopasować niektóre typy komponentów, zaznacz to

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

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

Wypróbuj niestandardowe typy:

 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

}

Skrzypce

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

Przykład:

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;

Zdjęcie: pokazuje błąd w konsoli, jeśli oczekiwany typ jest inny