如果发现错误!!元素类型无效：期望一个字符串

Question

我的反应js项目有错误，我在谷歌搜索过，但都没有给我解决方案

我得到的错误是这样的： 元素类型无效：期望一个字符串（用于内置组件）或一个类/函数（用于复合组件）但得到：object。您可能忘记从其定义的文件中导出组件，或者您可能混淆了默认导入和命名导入。

查看我的代码：

ArticleAll.js

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;

ArticleCard.js

import React from 'react';

class ArticleCard extends React.Component {
   render() {
      return (
         <div class="col s12 m6">
             <div class="card blue-grey darken-1">
                 <div class="card-content white-text">
                     <span class="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 class="card-action">
                     <a href="#" class="white-text">This is a link</a>
                     <a href="#" class="white-text">This is a link</a>
                 </div>
             </div>
         </div>
      )
   }
}

export default ArticleCard;

Routes.js

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;

Navigation.js

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;

Footer.js

import React from 'react';


class Footer extends React.Component {
   render() {
      return (
      <div>
        <footer class="page-footer">
          <div class="footer-copyright">
             <div class="left">&copy; 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;   

Answer 1

pch

pchs <- c(100,'ABC','540',sum(13+200),'SO77') plot(1:5,1:5,type='n',xlim=c(1,5.1)) text(1:5,1:5,labels = pchs) legend(3.5,3,legend = pchs,bty='n',title = '') legend(3.5,3,legend = paste(strrep(' ',12),'ID#',pchs),bty='n',title='Legend') rect(xleft = 3.7, ybottom = 1.5, xright = 5.1, ytop = 3) 是一个保留的JS关键字。您必须使用return ( <div> <footer class="page-footer"> 代替 -

class

Answer 2

auto $s = "123";   abc $s;