我正在尝试使用 python、HTML、Javascript、React、Flask 构建一个 Web 应用程序。 我创建了 python 包，我的 HTML 可以找到 javascript。但它并没有替换 HTML 中的项目。如果有人有任何见解，我将非常感激。
我已经安装了 React chrome 工具，但它说该页面没有使用 React。所以我真的不知道如何调试这个错误了。如果有人对此有见解，也请发表评论。
树:
├── README.md
├── bin
│ ├── install
│ └── run
└── meme
├── meme
│ ├── __init__.py
│ ├── main.py
│ ├── static
│ │ └── js
│ │ ├── generate.jsx
│ │ └── search.jsx
│ └── templates
│ ├── generate.html
│ └── search.html
├── meme.egg-info
│ ├── PKG-INFO
│ ├── SOURCES.txt
│ ├── dependency_links.txt
│ ├── requires.txt
│ └── top_level.txt
└── setup.py
localhost:8888/search/看起来像: 显然它没有渲染。
Loading...
搜索.HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Search</title>
</head>
<body>
<div id="reactEntry">Loading...</div>
<script type="text/javascript" src="{{url_for('static', filename="js/search.jsx")}}"></script>
</body>
</html>
搜索.jsx:
import React from 'react';
import ReactDOM from 'react-dom';
class SearchObj extends React.Component {
constructor(props) {
super(props)
this.state = {
query = "",
imgs = [{"name": "img1"}, {"name": "img2"}], // list of img dictionary
}
this.submitQuery = this.submitQuery.bind(this);
}
submitQuery() {}
render() {
console.log("render")
return (
<form onSubmit={this.submitQuery}>
<input id="query" type="text" name="submit">submit query</input>
</form>
);
}
}
// This method is only called once
ReactDOM.render(
<SearchObj url="/search/" />,
document.getElementById('reactEntry'),
);
最佳答案
浏览器不知道如何处理 .jsx 文件，因此您必须先将其转换为常规 JavaScript，然后您的应用才能解析它。您可以使用像 Webpack 这样的 bundler 或Parcel捆绑您的 JavaScript。
这里有一篇文章完全符合您想要做的事情，使用 Flask 提供 React 应用程序:https://itnext.io/a-template-for-creating-a-full-stack-web-application-with-flask-npm-webpack-and-reactjs-be2294b111bd
回复:调试 - 当出现问题时，您可以使用浏览器的开发工具进行调试。右键单击打开开发工具并选择“Inspect”(在不同浏览器中可能略有不同)。打开控制台查看是否有任何错误，或打开“网络”选项卡查看 JavaScript 文件的状态。
关于javascript 根本不以 HTML 形式呈现(React、Flask 应用程序)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61552514/