Question

我正在使用本教程通过Django内置的API在前端安装React。

https://sweetcode.io/how-use-djang-react-ap/

到目前为止，我有关此项目的资源库在这里：

https://github.com/AlexMercedCoder/DjangoReactCRM

当我npm运行dev时，我在App.js中遇到语法错误，我已经玩过它了，似乎无法弄清楚。我得到的错误是。

ERROR in ./frontend/src/components/App.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: 
C:\Users\alexm\projects\DjangoReactCRM\drcrm\frontend\src
\components\App.js: Unexpected token, expected "," (29:6)

  27 |
  28 | wrapper ? ReactDOM.render(<app>, wrapper) : null;
> 29 | </app>

App.js

import React, { Component } from "react";
import ReactDOM from "react-dom";


class App extends Component {

  state = {
      data: ''
  };

    componentDidMount() {
       fetch("/api")
          .then(response => {
           return response.json();
        })
        .then(data => this.setState({ data: JSON.stringify(data)}));
  }

   render(){

      return (
            <p>Jason data = {this.state.data}</p>
      )
  }
}


wrapper ? ReactDOM.render(<app>, wrapper) : null;
</app>

Answer 1

您的组件中存在三个问题。

我猜wrapper应该是document.getElementById("root")吗？即使那样，三元条件也没有道理。应该是这样的：

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

您将组件定义为App，但是在ReactDOM.render中您正在使用app
文件末尾有</app>。在这种情况下，它什么也不做。

Answer 2

首先，<app>组件在三元运算符外部关闭，因此您必须使用<app></ app>或更简单的<app />。

wrapper ? ReactDOM.render(<app></app>, wrapper) : null;

或

wrapper ? ReactDOM.render(<app/>, wrapper) : null;

然后，所有React组件必须以大写字母开头区分默认的DOM组件和使用React创建的DOM组件，因此您必须使用此表示法。

wrapper ? ReactDOM.render(<App />, wrapper) : null;

最后，在代码末尾看不到三元运算符的实用程序。通常，调用reactDOM.render(X, Y)时的第二个参数必须代表DOM元素，在其中将渲染主要的React组件（在本例中为<App />）。

默认情况下，当我们使用create-react-app创建一个React项目时，我们不必处理这些设置，并且DOM元素自动定义为<div id='root'></div>（在{{1}内部检查}在项目根目录下<body>中。因此，调用public/index.html以获取DOM元素，然后将结果作为第二个参数即可。

document.getElementById('root')

如果仍然存在，我建议您仅使用create-react-app创建另一个React项目，然后仅复制/粘贴所需的代码。

要获取更多信息：Click here

希望它能对您有所帮助。

**如果我的解释不明确或犯了一些错误，我深表歉意。

无法找出App.js中的语法错误

2 个答案: