React - Material UI图标的propType应该是什么答案

【问题标题】：React - what should be the propType of Material UI iconReact - Material UI图标的propType应该是什么
【发布时间】：2021-11-06 16:42:38
【问题描述】：

我要将 MUI 图标传递给组件 Test，我想为图标创建 Protype，但我不确定图标的正确 proptype 应该是什么

App.js

import "./styles.css";
import VisibilityIcon from "@material-ui/icons/Visibility";

import Test from "./Test";

export default function App() {
  return (
    <div className="App">
      <Test icon={<VisibilityIcon />} />
    </div>
  );
}

Test.jsx

import PropTypes from "prop-types";

function Test(props) {
  const { icon } = props;
  return (
    <div>
      Icon:
      {icon}
    </div>
  );
}

Test.propTypes = {
  // icon: ??????
};

export default Test;

https://codesandbox.io/s/intelligent-curie-8mtbw?file=/src/Test.jsx:0-213

【问题讨论】：

this 有帮助吗？

标签： javascript reactjs material-ui

【解决方案1】：

应该是PropTypes.element

Test.propTypes = {
  icon: PropTypes.element
};

工作示例：

【讨论】：

【解决方案2】：

如果你想具体一点，我会选择PropTypes.element。

Typechecking with PropTypes

Test.propTypes = {
  icon: PropTypes.element,
};

// A React element.
optionalElement: PropTypes.element,

如果您想更宽松/更一般，请使用PropTypes.node 来表示任何可渲染的内容。

// Anything that can be rendered: numbers, strings, elements or an array
// (or fragment) containing these types.
optionalNode: PropTypes.node,

【讨论】：