J'ai un composant que j'ai configuré en utilisant des hooks de réaction et j'ai passé un type d'accessoire unique à une entrée pour gérer les changements de style en cas d'erreur avec l'entrée utilisateur. Tout fonctionne comme prévu, mais maintenant j'obtiens une erreur d'accessoires inconnue dans la console et je ne peux pas comprendre comment la résoudre. L'erreur
import React from "react";
import styled from "styled-components";
import { Col, Row, Input, Checkbox } from "antd";
function validateEmail(value) {
const errors = {};
if (value === "") {
errors.email = "Email address is required";
} else if (!/\S+@\S+\.\S+/.test(value)) {
errors.email = "Email address is invalid";
}
return errors;
}
const CustomerDetails = ({ customer }) => {
const { contact = {} } = customer || {};
const [disableInput, setDisableInput] = React.useState(false);
const [errors, setErrors] = React.useState({});
const [inputValue, setInputValue] = React.useState(contact.email);
function onBlur(e) {
setErrors(validateEmail(e.target.value));
}
function clearInput() {
setInputValue(" ");
}
function handleInputChange(event) {
setInputValue(event.target.value);
}
function CheckboxClick() {
if (!disableInput) {
clearInput();
}
setDisableInput(prevValue => !prevValue);
setErrors({})
}
return (
<Container>
<Row>
<Col span={8}>
<StyledInput
value={inputValue}
onChange={handleInputChange}
disabled={disableInput}
onBlur={onBlur}
isError={!!errors.email}
/>
{errors.email && <ErrorDiv>{errors.email}</ErrorDiv>}
</Col>
<Col span={8}>
<Checkbox value={disableInput} onChange={CheckboxClick} /> EMAIL OPT
OUT
</Col>
</Row>
</Container>
);
};
const Container = styled.div`
text-align: left;
`;
const StyledInput = styled(Input)`
max-width: 100%;
background: white;
&&& {
border: 2px solid ${props => props.isError ? '#d11314' : 'black'};
border-radius: 0px;
height: 35px;
}
`;
const ErrorDiv = styled.div`
color: #d11314;
`;
export default CustomerDetails;
Le composant
React does not recognize the `isError` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `iserror` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
4 Réponses :
J'ai eu un problème similaire avec react-fontawesome. Le personnel de styled-components dit que c'est probablement un problème que les responsables de la bibliothèque dans laquelle le problème se produit (antd) devront résoudre. Pour l'instant, j'ai simplement mis en minuscules mon accessoire DOM, ce qui fera que l'erreur ne sera pas affichée.
La raison pour laquelle cela se produit est:
Le composant Input de antd renvoie la balise html input ( ).
Lorsque vous passez Input à styled , il renvoie également input avec les styles ajoutés.
const WrappedInput = ({ isError, ...remaining }) => <Input {...remaining} />;
const StyledInput = styled(WrappedInput)`...`
styled (Input) n'est pas comme un wrapper avec un élément autour. Il suffit d'obtenir le composant et d'ajouter les styles.
styled (SomeComponent) utilise vos accessoires pour styliser SomeComponent mais aussi passer les accessoires à SomeComponent . Cela passera isError à la balise input ( />) et lorsque vous faites cela, react essaiera pour trouver une propriété d'entrée isError qui n'existe pas, vous donnant l'erreur.
J'espère que cette explication vous aidera à mieux comprendre pourquoi cela se produit, mais jusqu'à présent, ce que vous pouvez faire est de minuscules le nom de votre accessoire.
Comme le disent les autres réponses et en regardant cet article , vous pouvez éviter que isError ne soit transmis à input en créant un composant wrapper qui supprime isError prop.
const StyledInput = styled(Input)`...` // this will return <input ... />
C'est le cas, mais lorsque j'ai tout changé en minuscules, j'obtiens l'erreur suivante index.js: 1446 Avertissement: Reçu `false` pour un attribut non booléen` iserror`. Si vous voulez l'écrire dans le DOM, passez une chaîne à la place: iserror = "false" ou iserror = {value.toString ()}.
@ JCalkins89 vous pouvez vérifier ma modification et aussi l'autre réponse.
Il semble que le composant Input transfère aveuglément tous les attributs qu'il reçoit et ne peut pas reconnaître à l'élément DOM sous-jacent. styled transmettra également tous les accessoires à l'élément sous-jacent. La solution idéale est de vérifier si styled vous permettra une syntaxe qui «absorbe» les accessoires au lieu de les transmettre. Il existe une entrée de FAQ à ce sujet dans la documentation styled :
Malheureusement, la solution ne fonctionne que si vous stylisez vos propres composants. Pour contourner ce problème, vous pouvez créer une entrée proxy que vous pouvez ensuite styliser:
const ProxyInput = ({ isError, ...props }) => <Input {...props} />
const StyledInput = styled(ProxyInput)`
max-width: 100%;
background: white;
&&& {
border: 2px solid ${props => props.isError ? '#d11314' : 'black'};
border-radius: 0px;
height: 35px;
}
`;
Ce n'est pas idéal et vous pouvez choisir de simplement mettre le code iserror correctement en minuscules > comme d'autres le suggèrent. Je ne mentionne cette alternative qu'au cas où vous n'aimeriez pas que les attributs aléatoires saignent dans vos éléments DOM.
Cette erreur est due au fait que styled-components passe par tous les accessoires pour les composants de réaction personnalisés. Consultez la documentation ici: https://www.styled-components.com/docs / basics #pass-props
Vous pouvez éviter l'erreur en suivant le modèle décrit ici: https://www.darrenlester.com/blog/prevent-all-props-being-passed
Dans votre cas, cela ressemblerait à ceci:
import PropTypes from 'prop-types';
const ErrorInput = ({ isError, ...remaining }) => <Input {...remaining} />;
ErrorInput.propTypes = {
isError: PropTypes.bool
}
Code complet: https: // codesandbox.io/s/awesome-wright-2l32l
Pour prendre en charge React PropTypes:
const ErrorInput = ({ isError, ...remaining }) => <Input {...remaining} />;
const StyledInput = styled(ErrorInput)`
max-width: 100%;
background: white;
&&& {
border: 2px solid ${props => (props.isError ? "#d11314" : "black")};
border-radius: 0px;
height: 35px;
}
`;
Cela a éliminé l'erreur, mais maintenant je récupère un avertissement de mon eslint disant Ligne 296: 'isError' est manquant dans la validation des accessoires react / prop-types des idées sur la façon de supprimer cela aussi ? Merci aussi pour la solution c'était super
Vous devez déclarer le type prop de isError comme un booléen. Ceci est la documentation de React PropTypes. reactjs.org/docs/typechecking-with-proptypes.html . Vous voulez quelque chose comme: `` `` import PropTypes from 'prop-types'; ErrorInput.propTypes = {isError: PropTypes.bool} `` `