Javascript 如果发现错误！！元素类型无效：应为字符串
我的react js项目有错误，我在谷歌搜索过，但都没有给我解决方案 我得到了这样的错误： 元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入 看看我的代码： ArticleAll.jsJavascript 如果发现错误！！元素类型无效：应为字符串,javascript,reactjs,Javascript,Reactjs,我的react js项目有错误，我在谷歌搜索过，但都没有给我解决方案 我得到了这样的错误： 元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。您可能忘记了从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入 看看我的代码： ArticleAll.js import React from 'react'; import Navigation from '../partials/Navigation'; import ArticleCard from '.
import React from 'react';
import Navigation from '../partials/Navigation';
import ArticleCard from './ArticleCard';
import Footer from '../partials/Footer';
class ArticleAll extends React.Component {
render() {
return (
<div class="page-wrapper">
<div id="control-body" class="fixed-sidebar medium-sidebar fixed-nav">
<Navigation/>
<main class="page-body">
<div class="row">
<div class="col s12 page-title-div">
<h1 class="header">Cards</h1>
<ol class="breadcrumbs left">
<li><a href="dashboard.html">Dashboard</a></li>
<li>Advanced UI</li>
<li class="active">Cards</li>
</ol>
<a class='dropdown-button dropdown-hover waves-effect waves-light page-help right' href='javascript:void(0)' data-activates='dropdown-help'>
<i class="material-icons">help</i>
</a>
<ul id='dropdown-help' class='dropdown-content'>
<li><a href="../../../external.html?link=http://materializecss.com/cards.html" target="_blank">API</a></li>
<li><a href="../../../external.html?link=http://materializecss.com/cards.html" target="_blank">Blog</a></li>
<li><a href="../../../external.html?link=http://materializecss.com/cards.html" target="_blank">Docs</a></li>
</ul>
</div>
</div>
<section class="section">
<div class="row ">
<ArticleCard/>
</div>
</section>
</main>
<Footer/>
</div>
</div>
)
}
}
export default ArticleAll;
从“React”导入React；
从“../partials/Navigation”导入导航；
从“./ArticleCard”导入ArticleCard；
从“../partials/Footer”导入页脚；
类ArticleAll扩展React.Component{
render（）{
返回(
卡
高级用户界面
卡
)
}
}
出口信用卡；
import React from 'react';
import { BrowserRouter, Route} from 'react-router-dom';
import Home from '../components/Home';
import Login from '../components/auth/Login';
import Register from '../components/auth/Register';
import ArticleAll from '../components/article/ArticleAll';
class Routes extends React.Component {
render() {
return (
<BrowserRouter>
<div>
{this.props.children}
<Route exact path="/" component={Home}/>
<Route exact path="/login" component={Login}/>
<Route exact path="/register" component={Register}/>
<Route exact path="/article" component={ArticleAll}/>
</div>
</BrowserRouter>
)
}
}
export default Routes;
从“React”导入React；
从“react router dom”导入{BrowserRouter，Route}；
从“../components/Home”导入Home；
从“../components/auth/Login”导入登录名；
从“../components/auth/Register”导入寄存器；
从“../components/article/ArticleAll”导入ArticleAll；
类。组件{
render（）{
返回(
{this.props.children}
)
}
}
导出默认路径；
import React from 'react';
import ReactDOM from 'react-dom';
class Navigation extends React.Component {
render() {
return (
<div>
<nav class="page-header z-depth-3">
<div class="nav-wrapper">
<a id="logo-container" href="#" class="brand-logo hide-on-med-and-down">materialcss</a>
<ul class="left">
<li class="hide-on-large-only">
<a href="javascript:void(0)" id="toggle-left-sidebar" class="hrz-menu waves-effect waves-default">
<i class="material-icons">menu</i>
</a>
</li>
</ul>
<ul class="right">
<li>
<a href="javascript:void(0)" class="hrz-menu waves-effect waves-default hide-show-nav-search">
<i class="material-icons">search</i>
</a>
</li>
<li>
<a href="javascript:void(0)" class="hrz-menu dropdown-button dropdown-belowOrigin waves-effect waves-default" data-activates="notification-list-dropdown">
<i class="material-icons">notifications</i>
<span id="notification-cout">25</span>
</a>
</li>
<li id="user-account-box">
<a href="javascript:void(0)" class="hrz-menu dropdown-button dropdown-belowOrigin dropdown-widthChange waves-effect waves-default" data-activates="user-account-dropdown">
<i class="material-icons">account_circle</i>
</a>
</li>
</ul>
<ul id="notification-list-dropdown" class="width-400 dropdown-content">
<li>
<a href="#!">
<i class="material-icons">email</i>
</a>
<p class="noti-message">
<a href="#!">New mail from jhon
<span>15 minutes ago</span>
</a>
</p>
</li>
<li>
<a href="#!" class="view-all-noti">See All</a>
</li>
</ul>
<ul id="user-account-dropdown" class="dropdown-content">
<li>
<a href="#!">
<i class="material-icons">perm_identity</i>My Profile
</a>
</li>
<li>
<a href="javascript:void(0)" class="toggle-right-sidebar">
<i class="material-icons">settings</i>Page Customizer
</a>
</li>
<li class="divider"></li>
<li>
<a href="#!">
<i class="material-icons">lock</i>Lock
</a>
</li>
<li>
<a href="#!">
<i class="material-icons">power_settings_new</i>Logout
</a>
</li>
</ul>
<div class="search-overlay hide"></div>
<div id="search-body" class="z-depth-1">
<form class="search-box">
<div class="input-field z-depth-1">
<input id="search" type="search" autocomplete="off" required="required" />
<label class="label-icon" for="search">
<i class="material-icons">search</i>
</label>
<i class="material-icons hide-show-nav-search">close</i>
</div>
</form>
</div>
</div>
</nav>
<aside>
<div class="left-sidebar-overlay"></div>
<div class="left-sidebar z-depth-3">
<div class="md-logo-container hide-on-large-only theme-bg">
<a class="md-brand-logo white-text" href="#">WhoamiHub</a>
</div>
<div class="left-sidebar-body">
<div class="current-subscription">
<table>
<tbody>
<tr>
<td class="center">
<span class="current-plan">Business</span>
<span class="price">$49/month</span>
</td>
<td class="center">
<a href="#" class="waves-effect waves-light btn-flat theme-text">UPGRADE</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="divider"></div>
<ul class="leftside-navigation">
<li class="navigation">Menu</li>
<li>
<a href="dashboard.html" class="menu waves-effect waves-default tooltipped" data-position="right" data-delay="50" data-tooltip="Dashboard">
<i class="material-icons left-icon">dashboard</i>Dashboard
</a>
</li>
<li>
<a href="javascript:void(0)" class="collapsible-label1 waves-effect waves-default tooltipped" data-position="right" data-delay="50" data-tooltip="Material UI">
<i class="material-icons left-icon">build</i>
<i class="material-icons right-icon">arrow_drop_down</i>Material UI
</a>
<ul class="collapsible-body">
<li>
<a href="buttons.html" class="waves-effect waves-default">Buttons</a>
</li>
<li>
<a href="breadcrumbs.html" class="waves-effect waves-default">Breadcrumbs</a>
</li>
<li>
<a href="collections.html" class="waves-effect waves-default">Collections</a>
</li>
<li>
<a href="collapsibles.html" class="waves-effect waves-default">Collapsibles</a>
</li>
<li>
<a href="dropdown.html" class="waves-effect waves-default">Dropdown</a>
</li>
<li>
<a href="tabs.html" class="waves-effect waves-default">Tabs</a>
</li>
<li>
<a href="pagination.html" class="waves-effect waves-default">Pagination</a>
</li>
<li>
<a href="preloader.html" class="waves-effect waves-default">Preloader</a>
</li>
<li>
<a href="toasts.html" class="waves-effect waves-default">Toasts</a>
</li>
<li>
<a href="tooltip.html" class="waves-effect waves-default">Tooltip</a>
</li>
<li>
<a href="waves.html" class="waves-effect waves-default">Waves</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="sidebar-footer">
<a href="javascript:void(0)" id="collapsed-left-sidebar" class="toggle-icon-left-sidebar waves-effect waves-default">
<i class="right material-icons">keyboard_arrow_left</i>
</a>
</div>
</div>
</aside>
</div>
)
}
}
export default Navigation;
从“React”导入React；
从“react dom”导入react dom；
类导航扩展了React.Component{
render（）{
返回(
-
-
-
-
-
-
-
-
-
-
搜索
关闭
生意
49元/月
- 菜单
-
-
-
-
-
-
-
-
-
-
-
-
-
import React from 'react';
import ReactDOM from 'react-dom';
class Navigation extends React.Component {
render() {
return (
<div>
<nav class="page-header z-depth-3">
<div class="nav-wrapper">
<a id="logo-container" href="#" class="brand-logo hide-on-med-and-down">materialcss</a>
<ul class="left">
<li class="hide-on-large-only">
<a href="javascript:void(0)" id="toggle-left-sidebar" class="hrz-menu waves-effect waves-default">
<i class="material-icons">menu</i>
</a>
</li>
</ul>
<ul class="right">
<li>
<a href="javascript:void(0)" class="hrz-menu waves-effect waves-default hide-show-nav-search">
<i class="material-icons">search</i>
</a>
</li>
<li>
<a href="javascript:void(0)" class="hrz-menu dropdown-button dropdown-belowOrigin waves-effect waves-default" data-activates="notification-list-dropdown">
<i class="material-icons">notifications</i>
<span id="notification-cout">25</span>
</a>
</li>
<li id="user-account-box">
<a href="javascript:void(0)" class="hrz-menu dropdown-button dropdown-belowOrigin dropdown-widthChange waves-effect waves-default" data-activates="user-account-dropdown">
<i class="material-icons">account_circle</i>
</a>
</li>
</ul>
<ul id="notification-list-dropdown" class="width-400 dropdown-content">
<li>
<a href="#!">
<i class="material-icons">email</i>
</a>
<p class="noti-message">
<a href="#!">New mail from jhon
<span>15 minutes ago</span>
</a>
</p>
</li>
<li>
<a href="#!" class="view-all-noti">See All</a>
</li>
</ul>
<ul id="user-account-dropdown" class="dropdown-content">
<li>
<a href="#!">
<i class="material-icons">perm_identity</i>My Profile
</a>
</li>
<li>
<a href="javascript:void(0)" class="toggle-right-sidebar">
<i class="material-icons">settings</i>Page Customizer
</a>
</li>
<li class="divider"></li>
<li>
<a href="#!">
<i class="material-icons">lock</i>Lock
</a>
</li>
<li>
<a href="#!">
<i class="material-icons">power_settings_new</i>Logout
</a>
</li>
</ul>
<div class="search-overlay hide"></div>
<div id="search-body" class="z-depth-1">
<form class="search-box">
<div class="input-field z-depth-1">
<input id="search" type="search" autocomplete="off" required="required" />
<label class="label-icon" for="search">
<i class="material-icons">search</i>
</label>
<i class="material-icons hide-show-nav-search">close</i>
</div>
</form>
</div>
</div>
</nav>
<aside>
<div class="left-sidebar-overlay"></div>
<div class="left-sidebar z-depth-3">
<div class="md-logo-container hide-on-large-only theme-bg">
<a class="md-brand-logo white-text" href="#">WhoamiHub</a>
</div>
<div class="left-sidebar-body">
<div class="current-subscription">
<table>
<tbody>
<tr>
<td class="center">
<span class="current-plan">Business</span>
<span class="price">$49/month</span>
</td>
<td class="center">
<a href="#" class="waves-effect waves-light btn-flat theme-text">UPGRADE</a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="divider"></div>
<ul class="leftside-navigation">
<li class="navigation">Menu</li>
<li>
<a href="dashboard.html" class="menu waves-effect waves-default tooltipped" data-position="right" data-delay="50" data-tooltip="Dashboard">
<i class="material-icons left-icon">dashboard</i>Dashboard
</a>
</li>
<li>
<a href="javascript:void(0)" class="collapsible-label1 waves-effect waves-default tooltipped" data-position="right" data-delay="50" data-tooltip="Material UI">
<i class="material-icons left-icon">build</i>
<i class="material-icons right-icon">arrow_drop_down</i>Material UI
</a>
<ul class="collapsible-body">
<li>
<a href="buttons.html" class="waves-effect waves-default">Buttons</a>
</li>
<li>
<a href="breadcrumbs.html" class="waves-effect waves-default">Breadcrumbs</a>
</li>
<li>
<a href="collections.html" class="waves-effect waves-default">Collections</a>
</li>
<li>
<a href="collapsibles.html" class="waves-effect waves-default">Collapsibles</a>
</li>
<li>
<a href="dropdown.html" class="waves-effect waves-default">Dropdown</a>
</li>
<li>
<a href="tabs.html" class="waves-effect waves-default">Tabs</a>
</li>
<li>
<a href="pagination.html" class="waves-effect waves-default">Pagination</a>
</li>
<li>
<a href="preloader.html" class="waves-effect waves-default">Preloader</a>
</li>
<li>
<a href="toasts.html" class="waves-effect waves-default">Toasts</a>
</li>
<li>
<a href="tooltip.html" class="waves-effect waves-default">Tooltip</a>
</li>
<li>
<a href="waves.html" class="waves-effect waves-default">Waves</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="sidebar-footer">
<a href="javascript:void(0)" id="collapsed-left-sidebar" class="toggle-icon-left-sidebar waves-effect waves-default">
<i class="right material-icons">keyboard_arrow_left</i>
</a>
</div>
</div>
</aside>
</div>
)
}
}
export default Navigation;
import React from 'react';
class Footer extends React.Component {
render() {
return (
<div>
<footer class="page-footer">
<div class="footer-copyright">
<div class="left">© materialcss</div>
<div class="right"><a href="javascript:void(0)" id="scroll-top-dash" class="tooltipped" data-position="top" data-delay="50" data-tooltip="Go top"><i class="material-icons">arrow_upward</i></a></div>
</div>
</footer>
</div>
)
}
}
export default Footer;
return (
<div>
<footer class="page-footer">
<footer className="page-footer" />
import React from 'react';
class ArticleCard extends React.Component {
render() {
return (
<div className="col s12 m6">
<div className="card blue-grey darken-1">
<div className="card-content white-text">
<span className="card-title">Card Title</span>
<p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p>
</div>
<div className="card-action">
<a href="#" className="white-text">This is a link</a>
<a href="#" className="white-text">This is a link</a>
</div>
</div>
</div>
)
}
}
export default ArticleCard;