Question

我正在尝试使用React.js代码运行单独的文件。

但是当我尝试运行该文件时，它不起作用。该页面只是一个空白。如果我在HTML文件中进行内联脚本编写，那就可以了。

我想要这样的html文件：

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>React - Projekt</title>
    <script src="../../js/react.min.js"></script>
    <script src="../../js/react-dom.min.js"></script>
    <script src="../../js/browser.min.js"></script>
    <script src="../../js/albums.js"></script>
</head>
<body>

    <div id="container"></div>

    <script type="text/babel" src="script.js"></script>

</body>
</html>

和我的js文件：

var Albums = React.createClass({
    render: function() {
        return (
            <div className="albums">
                {this.state.albums.map(function(album, index) {
                    return (
                        <Album
                            album={album}
                            onClick={this.removeAlbum.bind(this, index)}
                            />
                    )
                }, this)}
            </div>
        )
    }
});

// Rendera the shit innehåll
ReactDOM.render(
    <Albums />,
    document.getElementById("container")
);

有没有办法让这项工作？

Answer 1

您需要加载babel核心浏览器才能将script.js加载为text/babel

它将读取您的script.js并转换为JSX。在react-dom

之后插入此内容

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

脚本不运行React

1 个答案: