使用Asterix

问题描述 投票：0回答：2
代码

：

import * as Icons from '@mui/icons-material'; import { ListItemIcon } from '@mui/material'; const DynamicListItemIcon = (props) => { const { iconName } = props; const IconComponent = Icons[iconName]; return ( <ListItemIcon> <IconComponent /> </ListItemIcon> ) }; export default DynamicListItemIcon;

eRROR：元素类型无效：预期一个字符串（用于内置组件）或类/函数（用于复合组件），但got：未定义。您可能会忘记将组件从其定义的文件中导出，或者您可能将默认值混合并命名imports。

检查渲染方法
DynamicListItemIcon
。

发现问题！我正在使用错误的IconName。

例如：TableRowsicon必须是要工作的组件。 

更好的方法是使用材料图标CDN并使用
<Icon>


reactjs

next.js

import

material-ui

icons


2个回答




    
    
    

        

            

                

                    
1
投票

                    
                

            

        

        


<Icon />
component

    

    
    
    

    

        

            

                

                    
0
投票

                    
                

            

        

        
@material-ui/core
软件包中：
<!-- Add this in <head> section of index.html -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />



import Icon from '@material-ui/core/Icon';  // Import <Icon />

function Star() {
  return <Icon>star</Icon>;
}

    
	



    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2025. All rights reserved.