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

Question

我有 Yii2 项目设置，我决定使用 Facebook 的 JavaScript 框架 React.js which provided a convenient way to declare HTML templates inside JavaScript code, called 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 和来自 CDN 的 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 数组中的所有文件，因此您需要有两个资产 classes。像这样

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

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'
    ];
}

并在您的观点中包含第二个 class。 jsOptions 调用 View::registerjsFile function which in turn calls the jsFile helper function in Html class Here。如果没有特别定义的选项将作为脚本标签属性传递

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

How to use JSX file in Yii2 Asset Bundle

javascript

yii2

reactjs

assetbundle

react-jsx