javascript - REACT 给出了一些我不知道为什么的错误

标签 javascript reactjs webpack react-redux

我正在尝试学习 REACT。我正在关注教程。我根据教程制作了所有内容,但我没有完全看到我想要看到的内容,而是收到以下错误消息。 这是我收到的错误:

SyntaxError: '.container.' is not a valid selector
<anonymous>                http://localhost:8080/bundle.js:7875:70
__webpack_require__        http://localhost:8080/bundle.js:20:12
<anonymous>                http://localhost:8080/bundle.js:48:19
__webpack_require__        http://localhost:8080/bundle.js:20:12
<anonymous>                http://localhost:8080/bundle.js:40:18
<anonymous>

这是我的index.js代码: //从node_modules中找到react库并将其分配给变量React。

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

//Create a new component. This component should produce some HTML
//const = create some variable
const App = function(){
    return <div>Hey!</div>;
}

//web pack and babel translate for the browser.
//Take this component's generated HTML and put it on the page (in the DOM)
ReactDOM.render(<App />, document.querySelector('.container'));

我不明白出了什么问题,为什么它说“.container”。而在我的代码中它是“.container”

这是我的index.html

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/style/style.css">
    <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/48938155eb24b4ccdde09426066869504c6dab3c/dist/css/bootstrap.min.css">
    <script src="https://maps.googleapis.com/maps/api/js"></script>
  </head>
  <body>
  random stuff
    <div class="container"></div>
  </body>
  <script src="/bundle.js"></script>
</html>

此外,每次我更改代码中的某些内容时,我都必须停止服务器,然后再次运行它才能看到更改,就像这里的点一样,我必须停止服务器再次运行它才能消除该错误,但现在我使用 ID 而不是类名称,这解决了问题。但每次与服务器合作,还有更好的事情可做吗?

最佳答案

尝试定位 id 而不是类:

ReactDOM.render(<App />, document.getElementById("app"));

HTML 文件:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/style/style.css">
    <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/48938155eb24b4ccdde09426066869504c6dab3c/dist/css/bootstrap.min.css">
    <script src="https://maps.googleapis.com/maps/api/js"></script>
  </head>
  <body>
  random stuff
    <div id="app"></div>
  </body>
  <script src="/bundle.js"></script>
</html>

关于javascript - REACT 给出了一些我不知道为什么的错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47553044/

相关文章:

javascript - socket.io socket.on('connect'...不允许同一页面获取多个套接字

javascript - WebSocket TCP 数据包聚集在一起?

node.js - 使用绝对路径导入组件时,Jest 给出 `Cannot find module`

javascript - 将焦点放在标记鼠标悬停上的谷歌地图 InfoWindow

javascript - 在 Jquery detach() 和 appendTo() 之后定位元素

javascript - 我无法在 webpack 中使用 Babel 的其余操作符

javascript - 如果我不应该在 componentWillUpdate 中调用 setState,如何更新状态(使用 ReactJS)?

javascript - 如何修复 Webpack 在生产环境中破坏我的代码?

reactjs - 无法在 'html-webpack-plugin-before-html-processing' 注册插件。未找到 Hook

javascript - Uncaught ReferenceError : require is not defined react + webpack