web-dev-qa-db-fra.com

Le prop `children` est marqué comme requis dans` AppBar`, mais sa valeur est `undefined`

Je veux utiliser un composant matériel-ui natif, mais j'ai cette erreur dans le navigateur:

index.js: 2178 Avertissement: Type de prop échoué: La prop children est marquée comme requis dans AppBar, mais sa valeur est undefined.

Mon composant est:

import React from 'react';
import AppBar from 'material-ui/AppBar';

/**
 * A simple example of `AppBar` with an icon on the right.
 * By default, the left icon is a navigation-menu.
 */
const Header = () => (
  <AppBar
    title="Title"
    iconClassNameRight="muidocs-icon-navigation-expand-more"
  />
);

export default Header;

Aide-moi à comprendre pourquoi?

reactjsmaterial-ui
6
Alexandr Kostrov

J'ai le même problème avec ^1.0.0-beta.38 et j'ai trouvé la solution. Ceci est dû à une incompatibilité avec la nouvelle bibliothèque api. Selon le problème https://github.com/mui-org/material-ui/issues/6446 , la bibliothèque est en train de retravailler activement, mais la documentation n’a pas encore été mise à jour. Il semble que la nouvelle bibliothèque de versions fournisse les accessoires de validation requis par les enfants pour le composant AppBar. si vous regardez réagir inspecteur dev-tool, vous verrez que AppBar n’a pas d’enfants chez Props:  enter image description here

Logiquement, vous devez placer les enfants de nœuds enfants ToolBar et Typography dans AppBar comme suit:

import React, { Component } from 'react'
import { AppBar } from 'material-ui'

class App extends Component {
  render() {
    return(
      <AppBar>
        <Toolbar>
          <Typography variant="title" color="inherit">
            Title
          </Typography>
        </Toolbar> 
      </AppBar>
    );
  }
}

En inspecteur de réaction, vous pouviez voir un nouvel accessoire pour enfant.

2
Roman Anderson

Les enfants sont la composante embrassée par votre composante principale, elle devrait donc être:

<AppBar
  title="Title"
  iconClassNameRight="muidocs-icon-navigation-expand-more"
>
  <ChildrenComponent />
</AppBar>

Si vous n'avez pas besoin d'enfants, vous n'avez pas à le mettre au besoin.

0
Tomafa06

Lorsqu'il fonctionne pour la première fois, car il n'y a pas de valeur dans les accessoires, il apparaît donc comme suit: undefined, vous pouvez éviter que cette erreur ne définisse defaultProps et ne lui attribue une propriété isNotNull:

import PropTypes from "prop-types";

ComponentName.defaultProps = {
  input: PropTypes.isNotNull // you can amend this accordingly
}

NOTE: Si vous voulez autoriser l'utilisation de null isDefined et si vous voulez autoriser undefined, utilisez isNotNull comme (vous pouvez le modifier à votre guise):

PropTypes.string.isDefined // allows null but not undefined
PropTypes.string.isNotNull // allows undefined but not null

Vous pouvez en savoir plus sur la vérification de typage avec propTypes On React Documentation

0
Aaqib