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?
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:
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.
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.
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