为开关组件使用自定义图标时出错 [英] Error when using Custom Icon for Switch Component

问题描述

当我尝试使用自定义图标道具时，出现此错误:index.js:1406警告:道具类型失败:提供给 ForwardRef(Switch)的道具 icon 无效，应该是ReactNode.

When I try to use the custom icon prop I get this error: index.js:1406 Warning: Failed prop type: Invalid prop icon supplied to ForwardRef(Switch), expected a ReactNode.

我已经尝试了好几种方法，但无法使其正常工作.有什么想法为什么它不起作用?

I have tried several things and I cannot make it work. Any ideas why it is not working?

<Switch
  checked={formik.values.roleBasedAccess}
  onChange={handleRoleBasedChange}
  icon={HexagonSwitch}
  value="roleBasedAccess"
/>

和HexagonSwitch组件:

And the HexagonSwitch component:

import React from 'react';

const HexagonSwitch = () => {
        return (
            <svg width="24px" height="21px" viewBox="0 0 24 24">
                <g id="Add-on/Guided-Workflow/Pieces/Status-Indicator/Complete" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <polygon id="Polygon" fill="red" fill-rule="nonzero" points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5"></polygon>
                </g>
            </svg>
        );
};

推荐答案

失败的道具类型"消息告诉您它需要一个节点，但是您正在提供组件类型.

The "Failed prop type" message is telling you that it expects a node, but you are providing a component type.

组件类型: HexagonSwitch

节点(即组件类型的实例):< HexagonSwitch/>

Node (i.e. instance of the component type): <HexagonSwitch/>

下面是一个有效的示例.

Below is a working example.

import React from "react";
import Switch from "@material-ui/core/Switch";

const HexagonSwitch = () => {
  return (
    <svg width="24px" height="21px" viewBox="0 0 24 24">
      <g
        id="Add-on/Guided-Workflow/Pieces/Status-Indicator/Complete"
        stroke="none"
        strokeWidth="1"
        fill="none"
        fillRule="evenodd"
      >
        <polygon
          id="Polygon"
          fill="red"
          fillRule="nonzero"
          points="12 3 20 7.5 20 16.5 12 21 4 16.5 4 7.5"
        />
      </g>
    </svg>
  );
};
export default function Switches() {
  const [checked, setChecked] = React.useState(true);

  return (
    <div>
      <Switch
        checked={checked}
        onChange={event => setChecked(event.target.checked)}
        value="checkedA"
        icon={<HexagonSwitch />}
        checkedIcon={<HexagonSwitch />}
        inputProps={{ "aria-label": "secondary checkbox" }}
      />
    </div>
  );
}

这篇关于为开关组件使用自定义图标时出错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！