Question

我目前正在尝试学习如何让ReactJS和RequireJS一起工作，因为我想使用Chartist制作在线仪表板webapp。

但是，我无法理解它是如何工作的，因为它一直让我返回空页，就像JS代码一样。以下是我的样本：

// main.js
requirejs.config({
    // module name mapped to CDN url
    paths: {
        // Require.js appends `.js` extension for you
        'react': 'https://unpkg.com/react@15.3.2/dist/react',
        'react-dom': 'https://unpkg.com/react-dom@15.3.2/dist/react-dom',
    }
});

// load the modules defined above
requirejs(['react', 'react-dom'], function (React, ReactDOM) {

    var MyPage = React.createClass({
        render: function () {
            return (
                <div>
                    <h1>MY PAGE!</h1>
                </div>
            );
        }
    });

    // now you can render your React elements
    ReactDOM.render(<MyPage/>, document.getElementById('root'));
});

<!-- index.html -->
<html>
<body>
<!-- container for rendered React element -->
<div id="root"></div>

<!-- Require.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.min.js"></script>

<!-- main -->
<script src="../static/js/main.js" type="text/babel"></script>


</body>
</html>

from flask import Flask, render_template
from flask_cors import CORS

app = Flask(__name__)

CORS(app)

app.secret_key = "insert_random_value_here"

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


if __name__ == '__main__':
    app.run(port=7000)

目前，它给了我一个空的div，ID是＆＃34; root＆＃34;。正如你所看到的，这只是一个很小的例子，但如果我开始工作，我就可以前进了

Answer 1

更改您的HTML，如下所示：

<html>
<head>

</head>
<body>
<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.min.js"></script>

<!-- <script src="main.js" type="text/babel"></script> -->
<script type="text/javascript">
    // require config
    requirejs.config({
    // module name mapped to CDN url
    paths: {
        // Require.js appends `.js` extension for you
        'react': 'https://unpkg.com/react@15.3.2/dist/react',
        'react-dom': 'https://unpkg.com/react-dom@15.3.2/dist/react-dom',
    }
});
 require(['main'], function() {

        });   
</script>
</body>
</html>

此处移动了配置文件，并且需要 main.js 文件。不要使用<script src="main.js" type="text/babel"></script>，我猜它不起作用。

在 main.js 中，如果你使用babel来转换JSX，你可以直接编写JSX componentsnet，所以我写了没有JSX的反应，如下所示。

 requirejs(['react', 'react-dom'], function (React, ReactDOM) {

   const e = React.createElement;  
ReactDOM.render(   e('div', null, 'Hello World'),   document.getElementById('root') );
});

ReactJS + RequireJS返回空页面

1 个答案: