时间戳

首页 > 解决方案 > InvalidCharacterError：无法在“文档”上执行“createElement”：提供的标签名称（“/static/media/avatar.6043f57a.png”）不是有效名称

reactjs - InvalidCharacterError：无法在“文档”上执行“createElement”：提供的标签名称（“/static/media/avatar.6043f57a.png”）不是有效名称

问题描述

大家好，我是新来的反应并试图通过 youtube 教程克隆 Netflix。所以这里的问题是我在功能组件中使用了一个图像，但它没有正确渲染

我得到的错误是：

InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('/static/media/avatar.6043f57a.png') is not a valid name.

我的功能代码

import './Header.css';
import SearchIcon from '@material-ui/icons/Search';
import HeaderOption from './HeaderOption';
import HomeIcon from '@material-ui/icons/Home';
import SupervisorAccountIcon from '@material-ui/icons/SupervisorAccount';
import BusinessCenterIcon from '@material-ui/icons/BusinessCenter';
import ChatIcon from '@material-ui/icons/Chat';
import NotificationsIcon from '@material-ui/icons/Notifications';
import TabImg from './avatar.png';

function Header() {
    return (
        <div className="header">
            <div className="header__left">
                <img src="https://www.linkpicture.com/q/logo_9.svg" alt="Logo" />

                <div className="header__search">
                    <SearchIcon />
                    <input type="text"/>
                </div>
            </div>

            <div className="header__right">
                <HeaderOption Icon={HomeIcon} title="Home" />
                <HeaderOption Icon={SupervisorAccountIcon} title="My Network"/>
                <HeaderOption Icon={BusinessCenterIcon} title="Jobs" />
                <HeaderOption Icon={ChatIcon} title="Messaging" />
                <HeaderOption Icon={NotificationsIcon} title="Notifications" />
                <HeaderOption Avatar={TabImg} title="me"/>
            </div>
        </div>
    )
}

export default Header

我的 HeaderOption 代码：

import './HeaderOption.css';

function HeaderOption({Avatar, Icon, title }) {
    return (
    <div className="headerOption">
        {Icon && <Icon className="headerOption__Icon" />}
        {Avatar && (<Avatar className="headerOption__Icon" src={Avatar} />)}
        <h3 className="headerOption__title">{title}</h3>
    </div>
    )
}

export default HeaderOption

标签： reactjs

解决方案

<Avatar className="headerOption__Icon" src={Avatar} />)

您将Avatar符号名称加倍，尝试使用 is 作为组件名称和src道具值。在HeaderOption功能组件中，Avatar仅解析为 prop 值，因此就像尝试使用

</static/media/avatar.6043f57a.png src="/static/media/avatar.6043f57a.png" />

这显然不是有效的标记。

尝试Avatar使用不同的名称导入组件。例如

// for a default export
import AvatarImg from "northern/air/temple"

// or for a named export
import { Avatar as AvatarImg } from "northern/air/temple"

// snip...

{Avatar && (<AvatarImg className="headerOption__Icon" src={Avatar} />)}
<!--          note the component name -->

推荐阅读