如何在Yii2资产捆绑包中使用JSX文件

How to use JSX file in Yii2 Asset Bundle

本文关键字：包中使 JSX 文件 Yii2      更新时间：2023-09-26

我已经设置了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帮助我在视图中包含所需的库，因此我将React.JS和JSX文件从CDN添加到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？

您需要使用两个资产来执行此操作您可以将属性传递给js文件的script标记。然而，它将被传递到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辅助函数。如果没有特别定义，这些选项将作为脚本标记属性

传递
相关文章：