javascript在HTML中根本不呈现（React、Flask应用程序）_Javascript_Html_Reactjs_Web Applications

javascript在HTML中根本不呈现（React、Flask应用程序）

javascript html reactjs web-applications

javascript在HTML中根本不呈现（React、Flask应用程序）,javascript,html,reactjs,web-applications,Javascript,Html,Reactjs,Web Applications,我正在尝试用python、HTML、Javascript、React和Flask构建一个web应用程序。我创建了python包，我的HTML可以找到javascript。但它并没有替换HTML中的项目。如果有人有任何见解，我将不胜感激我已经安装了react chrome工具，但它说该页面没有使用react。所以我真的不知道如何调试这个错误了。如果有人对此有见解，也请发表评论树： localhost:8888/search/看起来像什么：显然，这不是渲染 Loading... searc

我正在尝试用python、HTML、Javascript、React和Flask构建一个web应用程序。我创建了python包，我的HTML可以找到javascript。但它并没有替换HTML中的项目。如果有人有任何见解，我将不胜感激

我已经安装了react chrome工具，但它说该页面没有使用react。所以我真的不知道如何调试这个错误了。如果有人对此有见解，也请发表评论

树：

localhost:8888/search/看起来像什么：显然，这不是渲染

Loading...

search.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>


搜寻
加载。。。

search.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'),
);

从“React”导入React；
从“react dom”导入react dom；
类SearchObj扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
查询=”，
imgs=[{“名称”：“img1”}，{“名称”：“img2”}]，//img字典列表
}
this.submitQuery=this.submitQuery.bind（this）；
}
submitQuery（）{}
render（）{
console.log（“呈现”）
返回(
提交查询
);
}
}
//此方法只调用一次
ReactDOM.render(
,
document.getElementById（'reactEntry'），
);

浏览器不知道如何处理

.jsx

文件，因此在应用程序解析之前，您必须将其转换为常规JavaScript。您可以使用类似或的绑定器来绑定JavaScript

这里有一篇文章正是您想要做的，它提供了一个带有Flask的React应用程序：

Re：调试-当事情不正常时，您可以使用浏览器的devtools进行调试。通过右键单击打开devtools并选择“Inspect”（在不同的浏览器中可能略有不同）。打开控制台查看是否有任何错误，或者打开网络选项卡查看JavaScript文件的状态

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