Question

package.json看起来像

{
  "name": "react_playlist",
  "version": "1.0.0",
  "description": "All the course files for the Net Ninja React tutorial playlist on YouTube",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "npm run build",
    "build": "webpack -d && webpack-dev-server --content-base src/ --inline --hot --port 1234"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/iamshaunjp/react-playlist.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/iamshaunjp/react-playlist/issues"
  },
  "homepage": "https://github.com/iamshaunjp/react-playlist#readme",
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^3.5.5",
    "webpack-dev-server": "^2.7.1"
  }
}

错误类似于

bundle.js：20087 Uncaught TypeError：超级表达式必须为
  null或函数，未定义
      在_inherits（bundle.js：20087）
      在bundle.js：20090
      在对象。（bundle.js：20115）
      在 webpack_require （bundle.js：677）
      在fn（bundle.js：88）
      在对象。（bundle.js：14155）
      在 webpack_require （bundle.js：677）
      在module.exports（bundle.js：723）
      在bundle.js：726

这是我的index.html

 <!DOCTYPE html>
    <html>
        <head>
              <title>React</title>
        </head>

        <body>
      <div id="xyz"></div>
          <script src = "/app/bundle.js"></script>

        </body>
    </html>

这是我的index.js

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.component{

  render(){

    return (
      <div>
      <h1>all good</h1>
      </div>
    )
  }
}


ReactDom.render(<App />,document.getElementById('xyz'));

Answer 1

这是因为您使用大写React.component（@ShubhamKhatri）React.Component代替C。

同样ReactDom应与导入中的大小写匹配，因此它应为ReactDOM（@AndreaFalzetti）。

以下是您的问题：

class App extends React.component{

  render(){

    return (
      <div>
      <h1>all good</h1>
      </div>
    )
  }
}


ReactDOM.render(<App />,document.getElementById('xyz'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
<div id="xyz"></div>

以下是您的问题：

class App extends React.Component{

  render(){

    return (
      <div>
      <h1>all good</h1>
      </div>
    )
  }
}


ReactDOM.render(<App />,document.getElementById('xyz'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
<div id="xyz"></div>

未捕获的TypeError：超级表达式必须为null或函数，而不是反应应用程序中的未定义错误

1 个答案: