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

Posted 2023-02-22

【中文标题】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 component

【发布时间】：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;

【参考方案1】：

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

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

例如。 （来自文档）：

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

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