React / React Hooks: неизвестная ошибка типа реквизита при вводе, не могу понять, как ее решить

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

Эта ошибка вызвана тем, что styled-components проходит через все реквизиты для пользовательских реагирующих компонентов. См. Документацию здесь: https://www.styled -components.com / docs / basics # пройденный реквизит

Вы можете избежать ошибки, следуя описанной здесь схеме: 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
}

Answer 2

Причина, по которой это происходит:

Компонент 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={...} />), и когда вы сделаете это, реагирование попытается найти свойство ввода isError, которого не существует, сообщив вам об ошибке.

Я надеюсь, что это объяснение поможет вам лучше понять, почему это происходит, но до сих пор вы можете сделать строчные буквы своего имени.

Edit:

Как сказано в других ответах и, глядя на эту статью , вы можете избежать передачи isError на input, создав компонент оболочки, удаляющий isError prop.

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

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

Answer 3

Кажется, что компонент Input будет вслепую пересылать все атрибуты, которые он получает, и не может распознать базовый элемент DOM.styled также перенаправит все реквизиты в базовый элемент.Идеальное решение - проверить, разрешит ли styled синтаксис, который «поглощает» реквизиты вместо их перенаправления.В документации styled есть запись FAQ :

К сожалению, решение работает только в том случае, если вы разрабатываете собственные компоненты.В качестве обходного пути вы можете создать прокси-ввод, который вы можете затем ввести:

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;
  }
`;

Это не идеально, и вы можете просто выбрать правильный 1019 * в нижнем регистре, как предлагают другие.Я упоминаю эту альтернативу только в том случае, если вам не нравятся случайные атрибуты, попадающие в ваши элементы DOM.

Answer 4

У меня была похожая проблема с реагирующим-потрясающим. Персонал styled-components говорит, что это, скорее всего, проблема, которую должны решить администраторы библиотеки, в которой возникает проблема (antd). На данный момент я просто опускаю свой DOM-реквизит, из-за чего ошибка не отображается.