React 警告：收到非布尔属性“my-optional-property”的“true”答案

【问题标题】：React Warning: Received `true` for a non-boolean attribute `my-optional-property`React 警告：收到非布尔属性“my-optional-property”的“true”
【发布时间】：2020-03-20 17:53:16
【问题描述】：

源代码

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;

错误消息如下所示。

stackoverflow 里面有很多问题和答案，但我没有找到合适的解决方案。

当然，我已经在控制台中检查了参数，但如上所述，'my-optional-property' 的类型是布尔值。

不知道为什么会出现这个错误。

完整代码如下 https://codesandbox.io/s/summer-dew-jnjex

【问题讨论】：

这是布尔值，不是布尔值。
我更改了布尔值，但仍然出现警告。
尝试将my-optional-property={true} 更改为my-optional-property="true"。
@SteveBack 对不起，我试过没有运气，让我们等待其他人的帖子
@keikai 我已经通过在将参数传递给 Button 类之前删除 my-optional-property 来解决它。谢谢你。

标签： javascript reactjs typescript material-ui

【解决方案1】：

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;

我已经通过修改删除属性解决了。

【讨论】：