Material UI - 提供给 ButtonBase 的 `component` 道具无效。 请确保在此自定义组件中呈现 children 道具

Question

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

(3) Material-UI：提供给ButtonBase的component道具无效。 请确保在此自定义组件中呈现 children 道具。

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

这是代码...

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道具内部传递 function 的方式。

Material UI文档建议您应该“避免使用内联函数，而是将 static 组件传递给组件属性。”

前任。 （来自文档）：

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

然后你可以在你的component道具内部传递它，而不是 function。