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

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 辅助函数。如果没有特别定义的选项将作为脚本标签属性传递