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

【问题标题】：Material UI - The `component` prop provided to ButtonBase is invalid. Please make sure the children prop is rendered in this custom componentMaterial UI - 提供给 ButtonBase 的 `component` 道具无效。请确保在此自定义组件中呈现 children 道具
【发布时间】：2021-08-11 14:52:30
【问题描述】：

提前为这个基本问题道歉，我不是一个强大的前端开发人员，我已经搜索了互联网。当我在 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;

【问题讨论】：

标签： javascript reactjs typescript material-ui

【解决方案1】：

我认为您遇到问题是因为您在 component 属性中传递函数的方式。

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

例如。（来自文档）：

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

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

【讨论】：