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

Question

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

(3) Material-UI: The component prop provided to ButtonBase isinvalid. Please make sure the children prop is rendered in this customcomponent.

为什么社交按钮选项卡会抛出此错误？

这是代码...

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 prop 中传递函数的方式。

Material 用户界面 docs建议您应该“避免内联函数，而是将静态组件传递给组件属性。”

例。 (来自文档):

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

然后你可以在你的 component 属性中传递它，而不是函数。