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

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

我的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')
    );
}());

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

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

---

有没有办法在AssetBundle中指定.jsx文件在呈现时脚本元素中的类型应为

text/jsx

可以将属性传递给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调用函数，该函数在Html类中依次调用jsFile helper函数。如果没有特别定义，选项将作为脚本标记属性传递

注意JSXTransformer不用于生产；它又大又慢。此外，在开发中，您应该使用开发版本（not.min），因为在生产中会出现一些有用的警告和错误。请注意！谢谢，我已经在我的资产包中更改了react-to-development版本。在单个视图中有两个资产看起来有点奇怪，在单个jsx文件中有一个单独的资产包更是如此。但它解决了我的问题。如果没有其他更合适的解决方案，我很赞成。谢谢！您只能包括第二个资产，因为这取决于第一个类别，它也将自动包括在内。至于多个类，直到Yii core在每个文件级别添加了对jsOptions的支持，我们无能为力。是的，我只添加了JSX资产，我想在资产文件夹中为单个视图添加两个类，这让我感到有点沮丧。但事实上，我们对Yii框架的特性无能为力。JSX不应该在服务器上而不是客户端上编译吗？

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