材料UI-提供给ButtonBase的"component"道具无效.请确保子道具在此自定义组件中呈

Question

提前为基本问题道歉，我不是一个强大的前端开发人员，我已经在互联网上搜索过了。当我在chrome中检查我的前端应用程序时，我一直收到这个错误。

(3(物料UI：提供给ButtonBase的component道具为无效的请确保儿童道具在此自定义中呈现组成部分

为什么社交按钮选项卡会引发此错误？

这是代码。。。

import React, {forwardRef} from 'react';
import '../../styles/header.css';
import {Link, useLocation} from 'react-router-dom';
import {Paper, Tabs, Tab} from '@material-ui/core';
import {Email, GitHub, LinkedIn} from '@material-ui/icons';

const Header: React.FC = () => {
const location = useLocation();
const renderSocialButton = (link: string, children: JSX.Element): JSX.Element => (
<a href={link}> 
{children}
</a>
);
return (
<Paper square>
<Tabs
value={location.pathname}
indicatorColor='primary'
textColor='primary'
aria-label='menu tabs'
centered
>   
<Tab 
label='Home'
className={'tab_nav'}
component={Link}
to={'/'}
value={'/'} 
/>
<Tab 
label='About'
className={'tab_nav'}
component={Link}
to={'/about'}
value={'/about'} 
/>
<Tab 
label=''
className={'space_nav'}
disabled
/>
<Tab 
component={ forwardRef(() => 
renderSocialButton('https://example.com', <Email className={'social_icon'} />)
)}
/>
<Tab 
component={ forwardRef(() => 
renderSocialButton('https://example.com', <GitHub className={'social_icon'} />)
)}
/>
<Tab 
component={ forwardRef(() => 
renderSocialButton('https://example.com', <LinkedIn className={'social_icon'} />)
)}
/>
</Tabs>
</Paper>
);
};
export default Header;

Answer 1

我认为您遇到了问题，因为您在component道具中传递函数的方式。

Material UI文档建议您应该"避免内联函数，而是将静态组件传递给组件道具">

Ex。(来自文档(：

const CustomLink = React.useMemo(
() =>
React.forwardRef((linkProps, ref) => (
<Link ref={ref} to={to} {...linkProps} />
)),
[to],
);

然后，您可以将其传递到component道具中，而不是函数中。