Question

我正在尝试使用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'));
});

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

const Portfolio = () => {
    return (
        <div className='red'>Portfolio page</div>
    );
}

但是当我从Component扩展它时会出现错误：

class Portfolio extends Component () {
  render() {
    return (
        <div>Portfolio page</div>
    );
  }
}

你能解释一下＆＃34; normal＆＃34;和类组件以及出现以下错误的原因。

Answer 1

假设您正在Component正确导入React.Component，请尝试删除组件后的括号。

应该是：

class Portfolio extends Component {

而不是：

class Portfolio extends Component () {

如果没有，请将Component替换为React.Component。

Answer 2

kctang提供的答案是正确的，即
使用：

class Portfolio extends Component {

代替：

class Portfolio extends Component () {}

我想添加原因？在面向对象的程序设计中，它称为继承，当您扩展/继承一个类以使用其组件时，您按其名称进行调用，并且它不是函数。在这里，您扩展了Component class not function，这就是为什么您不使用括号并且function也需要参数的原因。

React-router：TypeError：无法设置属性＆＃39; props＆＃39;未定义的

2 个答案: