gpt4 book ai didi

javascript 根本不以 HTML 形式呈现(React、Flask 应用程序)

转载 作者:行者123 更新时间:2023-12-02 20:53:16 24 4
gpt4 key购买 nike

我正在尝试使用 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com