Javascript Flask和Reactjs抛出JSX转换错误_Javascript_Python_Reactjs

Javascript Flask和Reactjs抛出JSX转换错误

javascript python reactjs

Javascript Flask和Reactjs抛出JSX转换错误,javascript,python,reactjs,Javascript,Python,Reactjs,我已经开始使用带有Python Flask后端的ReactJS 通过Flask呈现模板时，我在Chrome控制台中遇到以下客户端错误错误：找不到模块 “jstransform/visitors/es6模板访问者” 服务器： @app.route("/") def start(): return render_template('index.html') 客户端： index.html <html lang="en"> <head> <link h

我已经开始使用带有Python Flask后端的ReactJS

通过Flask呈现模板时，我在Chrome控制台中遇到以下客户端错误

错误：找不到模块 “jstransform/visitors/es6模板访问者”

服务器：

@app.route("/")
def start():
    return render_template('index.html')

客户端： index.html

<html lang="en">
<head>
    <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
    <script src="{{ url_for('static', filename='js/jquery-1.11.2.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/react.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/JSXTransformer.js') }}"></script>
    <script src="{{ url_for('static', filename='js/showdown.js') }}"></script>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

<div id="content"></div>

<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="{{ url_for('static', filename='js/ie10-viewport-bug-workaround.js') }}"></script>
<script type="text/jsx" src="{{ url_for('static', filename='js/golden-record.js') }}"></script>
</body>
</html>

为什么这会导致问题，每个文件似乎都在静态文件中找到。为什么JSX会失败？我必须先将JSX编译成Javascript吗

谢谢

更新：

@app.route("/")
def start():
    return render_template('index.html')

golden record.js

var SearchBox = React.createClass({...});

React.render(
    <SearchBox url="http://localhost:5000"/>,
    document.getElementById('content')
);

var SearchBox=React.createClass（{…}）；
反应(
,
document.getElementById（'content'）
);

我发现了问题

服务器在

127.0.0.1:5000上运行。

我必须将组件更改为指向IP地址，而不是本地主机：

React.render(
    <SearchBox url="http://127.0.0.1:5000/search"/>,
    document.getElementById('content')
);

React.render(
,
document.getElementById（'content'）
);

现在它起作用了。希望它能帮助其他人。

该模块应该在哪里加载？您的客户端代码似乎没有显示需要它。也就是说，是的，JSX总是需要通过预编译（用于生产/现场）或通过将JSXtranformer与react库客户端一起加载（用于开发测试）来转换。我已经添加了关于JSX内容的更多细节。这应该会有所帮助，但是如何解释JSX错误消息呢？您可能只需要执行

/search

，这样会更加灵活。