React-router:TypeError:无法设置undefined的属性'props'

vol*_*lna 13 javascript meteor reactjs react-router

我正在尝试Meteor使用react-router包设置路由并遇到以下问题TypeError:

链接到图像:https://postimg.org/image/v0twphnc7/

我使用的代码 main.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';

// Importing components
import App from './components/app';
import Portfolio from './components/portfolio/portfolio';


//Creating a route
const routes = (
  <Router history={browserHistory}>
    <Route path='/' component={App}>
      <Router path='portfolio' component={Portfolio} />
    </Route>
  </Router>
);


// Loading routes
Meteor.startup(() => {
  ReactDOM.render(routes, document.querySelector('.universe'));
});
Run Code Online (Sandbox Code Playgroud)

我设法识别的问题是,当我将投资组合定义为简单组件时,它可以工作.

const Portfolio = () => {
    return (
        <div className='red'>Portfolio page</div>
    );
}
Run Code Online (Sandbox Code Playgroud)

但是,当我从Component扩展它时,错误就出现了:

class Portfolio extends Component () {
  render() {
    return (
        <div>Portfolio page</div>
    );
  }
}
Run Code Online (Sandbox Code Playgroud)


您能否解释一下"正常"和类组件之间可能存在的差异以及出现以下错误的原因.

kct*_*ang 79

假设您正在导入ComponentReact.Component正确,尽量组件后去除括号.

应该:

class Portfolio extends Component {
Run Code Online (Sandbox Code Playgroud)

代替:

class Portfolio extends Component () {
Run Code Online (Sandbox Code Playgroud)

如果没有,请替换ComponentReact.Component.

  • 非常感谢!那很容易!:) *面掌* (2认同)
  • 为什么&gt;Component()的意思是?是因为这样它就像一个期待 props 的函数吗? (2认同)