代码之家 › 专栏 › 技术社区 › CCCC

反应-材质UI图标的类型应该是什么

material-ui reactjs javascript

CCCC · 技术社区 · 5 年前

我将把MUI图标传递给组件 Test 我想为图标创建Protype,但我不确定图标的正确Protype是什么

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

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

2 回复 | 直到 5 年前

Ryan Le 5 年前

它应该是一个 PropTypes.element

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

工作示例:

Drew Reese 5 年前

我会和你一起去 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,

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前