React/React 挂钩：输入时出现未知道具类型错误，不知道如何解决

Question

我有一个使用反应钩子设置的组件，并且我已经将唯一的道具类型传递给输入以在用户输入出现错误时处理样式更改。一切都按预期工作，但现在我在控制台中收到一个未知的道具错误，我不知道如何解决它。错误

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

我有一个 similar issue 和 react-fontawesome。 styled-components 工作人员说这很可能是发生问题的库 (antd) 的维护者需要解决的问题。现在，我只是将我的 DOM 属性小写，这将导致错误不显示。

Answer 2

出现这种情况的原因是：

来自 antd returns input html 标签 (<input ... />) 的 Input 组件。

当您将 Input 传递给 styled 时，它还会 returns 添加了样式的 input。

const StyledInput = styled(Input)`...`  // this will return <input ... />

styled(Input) 不像周围有一些元素的包装器。它只是获取组件，并添加样式。

styled(SomeComponent) 使用你的 props 来设计 SomeComponent，同时也将 props 传递给 SomeComponent。这会将 isError 传递给 input 标签 (<input isError={...} />)，当你这样做时，React 将尝试找到一个输入属性 isError 至极t 存在，给你错误。

我希望这个解释能帮助你更好地理解为什么会发生这种情况，但到目前为止，你能做的就是小写你的 prop 名称。

编辑：

正如其他答案所说并查看 this article，您可以通过创建一个移除 isError 属性的包装器组件来避免将 isError 传递给 input .

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

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

Answer 3

似乎 Input 组件会盲目地将它接收到的所有属性转发给底层 DOM 元素。 styled 也会将所有 props 转发给底层元素。理想的解决方案是检查 styled 是否允许您使用 "absorbs" 支持的语法而不是转发它们。 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 4

此错误是因为 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 PropTypes：

import PropTypes from 'prop-types';

const ErrorInput = ({ isError, ...remaining }) => <Input {...remaining} />;
ErrorInput.propTypes = {
  isError: PropTypes.bool
}

React/React 挂钩：输入时出现未知道具类型错误，不知道如何解决

React/React Hooks: Unknown prop type error on input, can't figure out how to resolve

reactjs

react-proptypes

styled-components

react-hooks

编辑：