检查 `component` 的渲染方法

Posted

技术标签:

【中文标题】检查 `component` 的渲染方法【英文标题】:Check the render method of `component` 【发布时间】:2019-01-17 14:15:03 【问题描述】:

我正在尝试按照指南设置 react-router-dom 高阶组件。我有一个问题要说..

元素类型无效:应为字符串(用于内置组件)或类/函数(用于复合组件)但得到:对象。您可能忘记从定义组件的文件中导出组件,或者您可能混淆了默认导入和命名导入。 检查component的渲染方法。

这是我的代码。

App.js

import React from 'react';
import 
  BrowserRouter as Router,
  Route,
 from 'react-router-dom';

import Navigation from './Navigation';
import LandingPage from './Landing';
import SignUpPage from './SignUp';
import SignInPage from './SignIn';
import PasswordForgetPage from './PasswordForget';
import HomePage from './Home';
import AccountPage from './Account';

import * as routes from '../constants/routes';

const App = () =>
  <Router>
    <div>
      <Navigation />

      <hr/>

      <Route exact path=routes.LANDING component=() => <LandingPage /> />
      <Route exact path=routes.SIGN_UP component=() => <SignUpPage /> />
      <Route exact path=routes.SIGN_IN component=() => <SignInPage /> />
      <Route exact path=routes.PASSWORD_FORGET component=() => <PasswordForgetPage /> />
      <Route exact path=routes.HOME component=() => <HomePage /> />
      <Route exact path=routes.ACCOUNT component=() => <AccountPage /> />
    </div>
  </Router>

export default App;

还有我的 index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App';
import  unregister  from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
unregister();

谢谢。

【问题讨论】:

你明白了吗? 你发现了吗? 【参考方案1】:

我相信您混淆了您的反应路由器 Route 属性值。要将组件分配给Route,有几种不同的方法。一个是component,另一个是render

<Route ... component=LandingPage />

<Route ... render=() => <LandingPage /> />

您使用的是 render 语法,但使用的是 component 属性。要么将component 更改为render,要么将() =&gt; &lt;LandingPage /&gt; 更改为LandingPage(其他路由也一样)。

【讨论】:

我改成组件语法,现在得到检查Route的渲染方法。渲染语法也会出现同样的错误

以上是关于检查 `component` 的渲染方法的主要内容,如果未能解决你的问题,请参考以下文章

Javascript列表包含一个字符串[重复]

解决vue的component标签渲染问题的方法

Vuejs 中的动态导入

component.ts 文件中的错误限制了角度渲染

react-data-components 渲染组件(按钮),但无法访问在渲染方法之外定义的状态或函数

React Route 渲染空白页面