reactjs TypeError:react js中未定义的类扩展值不是构造函数或为空

oo7oh9g9  于 2022-11-29  发布在  React
关注(0)|答案(5)|浏览(102)

我是react的初学者,我正在使用https://jscomplete.com/repl.中的一个示例
到目前为止,我的代码如下所示:

let data = [
    {
    name:"Paul O’Shannessy",
    avatar_url:"https://avatars1.githubusercontent.com/u/8445?v=4",
        company_name:"Facebook"
  },
  {
    name:"Tom Preston-Werner",
    avatar_url:"https://avatars0.githubusercontent.com/u/1?v=4",
        company_name:"Facebook"  
  }
];

const Card = (props) => {
    return (
    <div style={{margin:'1em'}}>
        <img width="75" src={props.avatar_url} />
      <div className="info" style={{display: 'inline-block',marginLeft: 10}}>
        <div style={{fontSize: '1.25em',fontWeight: 'bold'}}>{props.name}</div>
        <div>{props.company_name}</div>
      </div>
    </div>
  );
}

const CardList = (props) => {
    return (
    <div>
        {props.cards.map((card) => <Card {...card}/>)}
    </div>
  );
}

class Form extends React.component {
    render() {
    return (
        <form>
        <input type="text" placeholder="Github Username" />
        <button type="submit">Add Card</button>
      </form>
    );
  };
}

class App extends React.component {
    render() {
    return (
        <div>
        <Form />
        <CardList cards={data} />
      </div>
    );
  };
}

ReactDOM.render(<App />,mountNode);

但是每次我运行的时候,我总是得到这个运行时错误。我做错了什么?

bxgwgixi

bxgwgixi1#

应该是React.Component而不是React.component
注意大写字母。

tzxcd3kk

tzxcd3kk2#

当您导入React时,请尝试使用React.Component,而不要使用React.Component()。删除这些括号,则此错误将消失。

import React from 'react';
......
class App extends React.Component {
}

或者你可以试试这个。

import React, {Component} from 'react';
......
class App extends Component {
bttbmeg0

bttbmeg03#

在我的例子中,以下是失败的:

import { AbstractFilter } from './';

export class DismissedFilter extends AbstractFilter {
...

我的索引是这样的:

export { AbstractFilter}  from './filter';

我可以通过指定导入的完整路径来解决此问题:

import { AbstractFilter } from './filter';

export class DismissedFilter extends AbstractFilter {
...

错误似乎与Webpack有关

svdrlsy4

svdrlsy44#

在我的情况下,这是套接字版本的问题,所以我这样做,以解决我的问题

- npm un socket.io-client
- npm i socket.io-client@4.4.1
- npm start
bvjxkvbb

bvjxkvbb5#

可能与此情况特别无关,但我一直在从react-css-modules升级到babel-plugin-react-css-modules,并得到这个相同的错误。
结果是我配置的postcss-scss语法,明确需要postcss@8定义为我的package.json中的一个依赖项,(值得一提的是,对于像stylelint-config-standard-scss这样的库来说似乎也是一个错误),所以:

yarn add -D postcss@8

解决了我的问题。

相关问题