Question

我有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类型？

Answer 1

您需要使用两个资源才能执行此操作您可以将属性传递给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辅助函数。如果没有特别定义，选项将作为脚本标记属性

传递

如何在Yii2 Asset Bundle中使用JSX文件

1 个答案: