reactjs - React Material UI 图标传入 props --> 到 jsx (Typescript)
问题描述
我在 React 环境中使用 Material UI 库中的图标。我将此图标作为属性传递给子反应元素,我想在此子元素中呈现它。
因此,如果通常您只需要:
import DeleteIcon from '@material-ui/icons/Delete';
...
render(
<DeleteIcon/>
)
现在我把它作为子元素中的一个属性,这是我的孩子的代码:
export const InteractiveListItem: React.FC<{ Icon?: OverridableComponent<SvgIconTypeMap<{}, "svg">> }> = (props) => {
return (
{props.Icon} ------> not rendered!
)
如何将此 ovverrideableComponent “转换”为可接受的 ReactElement?
解决方案
确保以正确的方式传递道具:Icon={<DeleteIcon />}
,正如您在 InteractiveListItem 组件中指定的那样。
推荐阅读
- angular - 错误:- StaticInjectorError(AppModule) - ngx-bootstrap-product-tour
- javascript - 为什么我的 SVG 图像在 chrome 上完美显示,但是当我在 iPhone 上打开它时,它根本不显示?
- jquery - Chrome 扩展:$.ajax 不是函数
- css - 使用宽度过渡时如何防止 Chrome 闪烁?
- javascript - Chrome 扩展:webNavigation 同时限制权限范围
- r - 在 R 中绘制分类变量 OLS
- java - Android java xml到json很长
- c# - 如何在 C# 中的表单加载时使用结构填充列表
- sql - Laravel 简单的私人对话结构
- excel - 基于单元格内容的 Microsoft Excel VBA 代码范围