5

我有 Yii2 项目设置，我决定使用 Facebook 的 JavaScript 框架React.js，它提供了一种在 JavaScript 代码中声明 HTML 模板的便捷方法，称为JSX。

我的 JavaScript 如下所示：

(function () {
    'use strict';

    MyBlock = React.createClass({
        getInitialState: function () {
            return {data: []};
        },
        componentDidMount: function () {
            $.ajax({
                url: '/api/',
                dataType: 'json',

                success: function (data) {
                    this.setState({ data: data });
                }.bind(this)
            });
        },

        render: function () {
            <div class="block">
                {this.props.variable}
            </div>
        }
    });

    React.render(
        <ProfileQuestion />,
        document.getElementById('profile_question_wrapper')
    );
}());

AssetBundle 帮助我在视图中包含所需的库，因此我将 CDN 中的 React.JS 和 JSX 文件添加到我的 AssetBundle 中：

class MyAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
    ];
    public $js = [
        '//fb.me/react-0.13.1.min.js',
        '//fb.me/JSXTransformer-0.13.1.js',
        'js/app.jsx',
    ];
    public $depends = [
        'app\assets\AppAsset'
    ];
}

但是，当它在我的页面底部添加脚本时，它显示为

<script src="/js/app.jsx"></script>

并且没有标记脚本的类型，text/jsx因此 JSX 转换库无法识别 JSX 语法，并且 .jsx 文件解释为简单的 JavaScript，从而在 JSX 样式上抛出语法错误消息。

SyntaxError: Unexpected token '<'

有没有办法在 AssetBundle 中指定 .jsx 文件text/jsx在渲染时应该具有 in script 元素的类型？

4

1 回答 1

2

您将需要使用两个资产来执行此操作您可以将属性传递给 js 文件的脚本标记。但是它将被传递给 JS 数组中的所有文件，因此您需要有两个资产类。像这样

class MyAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';
    public $css = [
    ];
    public $js = [
        '//fb.me/react-0.13.1.min.js',
        '//fb.me/JSXTransformer-0.13.1.js',
    ];
    public $depends = [
        'app\assets\AppAsset'
    ];
}

二等

class JSXAsset extends AssetBundle
{
    public $basePath = '@webroot';
    public $baseUrl = '@web';

    public $js = [
        'js/app.jsx',
    ];
    public jsOptions = ['type'=>'text/jsx'];
    public $depends = [
        'app\assets\MyAsset'
    ];
}

并在您的视图中包含第二类。jsOptions 调用View::registerjsFile函数，该函数又调用 Html 类Here中的 jsFile 辅助函数。如果没有特别定义，选项将作为脚本标签属性传递

于 2015-04-06T00:41:23.387 回答