我有一个使用 react 钩子设置的组件，并且我已经将唯一的 prop 类型传递给输入，以便在用户输入出错时处理样式更改。一切都按预期工作，但现在我在控制台中收到一个未知的道具错误，我不知道如何解决它。错误
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.
组件
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;
此错误是因为styled-components遍历了自定义 react-components 的所有 props。请参阅此处的文档：https://www.styled-components.com/docs/basics#passed-props
您可以通过遵循此处描述的模式来避免此错误：https://www.darrenlester.com/blog/prevent-all-props-being-passed
在您的情况下，这看起来像这样：
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;
}
`;
完整代码：https://codesandbox.io/s/awesome-wright-2l32l
要支持 React PropType，请执行以下操作：
import PropTypes from 'prop-types';
const ErrorInput = ({ isError, ...remaining }) => <Input {...remaining} />;
ErrorInput.propTypes = {
isError: PropTypes.bool
}
似乎Input组件会盲目地将它收到且无法识别的所有属性转发到底层 DOM 元素。 styled还会将所有道具转发到底层元素。理想的解决方案是检查styled是否允许您使用"吸收"道具而不是转发它们的语法。在styled文档中有一个关于此的常见问题解答条目：
不幸的是，该解决方案仅在您设置自己的组件样式时才有效。作为解决方法，您可以创建一个代理输入，然后您可以设置以下样式：
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;
}
`;
这并不理想，您可以选择按照其他人的建议只制作正确的小写iserror。我只提到这个替代方案，以防您不喜欢随机属性渗入您的 DOM 元素。
发生这种情况的原因是：
来自 antd 的 Input 组件返回input html 标记 ( <input ... /> (。
当您将Input传递给styled 时，它还返回添加了样式的input。
const StyledInput = styled(Input)`...` // this will return <input ... />
styled(Input)不像一个带有一些元素的包装器。它只是获取组件，并添加样式。
styled(SomeComponent)使用道具来设计SomeComponent，但也将道具传递给SomeComponent。这会将isError传递给input标签(<input isError={...}/>(，当你这样做时，react 会尝试找到一个不存在isError输入属性，给你错误。
我希望这个解释能帮助你更好地理解为什么会发生这种情况，但到目前为止，你能做的是小写你的道具名称。
编辑：
正如其他答案所说，看看这篇文章，你可以通过创建一个删除isError prop 的包装组件来避免isError传递给input。
const WrappedInput = ({ isError, ...remaining }) => <Input {...remaining} />;
const StyledInput = styled(WrappedInput)`...`
我在react-fontawesome上遇到了类似的问题。样式组件的工作人员说，这很可能是出现问题的库(antd(的维护者需要解决的问题。现在，我只是将我的 DOM 道具小写，这将导致错误无法显示。