5

私は Yii2 プロジェクトをセットアップしました。Facebook の JavaScript フレームワークReact.jsを使用することにしました。このフレームワークは、 JSXと呼ばれる 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')
    );
}());

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 '<'

レンダリング時に .jsx ファイルがtext/jsxスクリプト要素のタイプを持つ必要があることを AssetBundle で指定する方法はありますか?

4

1 に答える 1

2

これを行うには、2 つのアセットを使用する必要があります。js ファイルのスクリプト タグに属性を渡すことができます。ただし、JS 配列内のすべてのファイルに渡されるため、2 つのアセット クラスが必要になります。このような

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

ビューに 2 番目のクラスを含めます。jsOptions はView::registerjsFile関数を呼び出します。この関数は、Html クラスHereの jsFile ヘルパー関数を呼び出します。特別に定義されていない場合、オプションは script タグ属性として渡されます

于 2015-04-06T00:41:23.387 に答える