编辑：

Question

我有一个使用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;

Answer 1

发生这种情况的原因是：

Input中的antd组件返回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，从而错误。

我希望这种解释可以帮助您更好地理解为什么会发生这种情况，但是到目前为止，您可以做的是用小写的道具名称。

编辑：

如其他答案所述，并看着this article，可以通过创建一个包装器组件来删除isError道具来避免将input传递给isError。 / p>

const WrappedInput = ({ isError, ...remaining }) => <Input {...remaining} />;

const StyledInput = styled(WrappedInput)`...`

Answer 2

似乎Input组件会盲目转发它接收到的所有属性，并且无法识别基础DOM元素。 styled还将所有道具转发到基础元素。理想的解决方案是检查styled是否允许您使用“吸收”道具而不是转发道具的语法。 styled文档中有an FAQ entry：

不幸的是，该解决方案仅在设计自己的组件样式时才有效。解决方法是创建代理输入，然后设置样式：

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元素。

Answer 3

此错误是因为styled-components遍历了用于自定义react-components的所有道具。请参阅此处的文档：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
}

Answer 4

我有一个{-{3}}，反应很好。样式化组件的工作人员说，这很可能是发生问题（antd）的库的维护者需要解决的问题。现在，我只是将我的DOM属性小写，这将导致错误不会显示。

React / React Hooks：输入上未知的道具类型错误，无法解决

4 个答案:

编辑：