Question

我正在努力学习REACT。我正在学习教程。我根据教程制作了所有内容，但我没有看到我想要看到的内容，而是收到以下错误消息。这是我得到的错误：

const uiSchema = {
      "c1": {
        "ApplicantTitle": {
          "ui:widget": "text"
        },
        "ApplicantSurname": {
          "ui:widget": "text"
        },
        "ApplicantGender": {
          "ui:widget": "select"
        }
      },
      "c2": {
        "Tenure": {
          "ui:widget": "select"
        },
        "MovedToAddressDate": {
          "ui:widget": "date"
        }
      },
      "c3": {
        "Pregnant": {
          "ui:widget": "select"
        },
        "PregnantDueDate": {
          "ui:widget": "date"
        },
        "ParentGuardianChildUnder19": {
          "ui:widget": "select"
        },
      },
      "_unmapped": {
        "ApplicantForenames": {
          "ui:widget": "text"
        },
        "ApplicantDateOfBirth": {
          "ui:widget": "date"
        }
      }
    };

var result = [];
for(var key in uiSchema){
  result.push(uiSchema[key]);
}
console.log(result);

这是我的index.js代码： //从node_modules中找到react库并将其分配给变量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>

我不明白出了什么问题，为什么要说'.container'。而在我的代码中它是'.container'

这是我的index.html

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'));

每当我在代码中更改某些内容时，我必须停止服务器，然后再次运行它以查看更改，就像这里的点，我不得不停止服务器再次运行它以摆脱该错误，但现在我使用ID而不是CLASS名称，这解决了问题的种类。但每次使用服务器时，还有更好的事情要做吗？

Answer 1

尝试定位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>

Answer 2

如果你在反应中创建Functional Component，则需要将props作为参数传递给函数。

const App = function(props){
   return <div>Hey!</div>;
}

REACT给出了一些我不确定的错误

2 个答案: