React Warning: Получено `true` для не булевого атрибута` my-option-property` - PullRequest
Новая
       55

React Warning: Получено `true` для не булевого атрибута` my-option-property`

1 голос
/ 20 марта 2020

исходный код 

import React from "react";
import { Button, ButtonProps } from "@material-ui/core";

interface MyButtonProps extends ButtonProps {
  "aria-label": string;
  "my-optional-property"?: boolean;
}

function MyButton(props: MyButtonProps) {
  console.log(props);
  return <Button {...props} aria-label={props["aria-label"]} />;
}

function App() {
  return (
    <div>
      <MyButton aria-label="aria-label" my-optional-property={true}>
        button
      </MyButton>
    </div>
  );
}

export default App;

Сообщение об ошибке фиксируется ниже. enter image description here

В stackoverflow столько вопросов и ответов, но я не нашел правильного решения.

Конечно, я проверил параметры в console, но, как указано выше, тип 'my-option-property' является логическим.

Я не знаю, почему возникла эта ошибка.

Полный код соответствует https://codesandbox.io/s/summer-dew-jnjex

1 Ответ

0 голосов
/ 21 марта 2020 
import React from "react";
import { Button, ButtonProps } from "@material-ui/core";

interface MyButtonProps extends ButtonProps {
  "aria-label": string;
  "my-optional-property"?: boolean;
}

function clone(obj: any) {
  if (obj === null || typeof obj !== "object") return obj;

  var copy = obj.constructor();

  for (var attr in obj) {
    if (obj.hasOwnProperty(attr)) {
      copy[attr] = obj[attr];
    }
  }

  return copy;
}

function MyButton(props: MyButtonProps) {
  /*
  do what I want with my-optional-property. before passing parameter to Button
  */
  let buttonProps: ButtonProps = clone(props);
  delete buttonProps["my-optional-property"];
  return <Button {...buttonProps} aria-label={props["aria-label"]} />;
}

function App() {
  return (
    <div>
      <MyButton aria-label="aria-label" my-optional-property={true}>
        button
      </MyButton>
    </div>
  );
}

export default App;

Я решил это, изменив свойство delete.

...