JSX和v8js - 意外的令牌<

时间:2016-02-03 18:09:01

标签: javascript php reactjs v8

是的,所以我试图找出代码中的扭结,以便在服务器端处理渲染反应JSX代码。

当我的test.js如下:

var CommentBox = React.createClass({displayName: 'CommentBox',
    render: function() {
        return (
            React.createElement(
                'div', 
                {className: "commentBox"},
                "Hello, world! I am a CommentBox."
            )
        );
    }
});

以下代码有效:

    $react_source = implode("\n", [
        file_get_contents(\Yii::getAlias("@bower").'/react/react.js'),
        file_get_contents(\Yii::getAlias("@bower").'/react/react-dom-server.js'),
    ]);

    $react_app = implode("\n", [
        file_get_contents(\Yii::getAlias("@app").'/web/test/test.js')
    ]);

    $react = array();
    // stubs, react
    $react[] = "var console = {warn: function(){}, error: print}";
    $react[] = "var global = global || this, self = self || this, window = window || this";
    $react[] = $react_source;
    $react[] = "var React = global.React";
    $react[] = "var ReactDOMServer = global.ReactDOMServer";
    $react[] = $react_app;

    $concatenated = implode(";\n", $react);

    $v8 = new \V8Js();

    $v8->executeString($concatenated);

    $js = $v8->executeString(sprintf("ReactDOMServer.renderToString(React.createElement(%s))", 'CommentBox'));

    return $this->render('index', [
        'js' => $js
    ]);

但当我的test.js看起来如下:

var CommentBox = React.createClass({
    render: function() {
        return (
            <div className="commentBox">
                Hello, world! I am a CommentBox.
            </div>
        );
    }
});

我收到以下错误:V8Js::compileString():18861: SyntaxError: Unexpected token <

现在我假设这是因为JSX代码需要编译成javascript代码(工作版本),但是如何在PHP的后端进行呢?

成功......有点 所以我设法让这个工作。我使用babel将文件从jsx转换为普通的js,这看起来像我原来的工作代码。这一切都适用于PHP端渲染。但是,现在我遇到了使webpack捆绑代码正常工作的问题,但这是另一个问题,所以我要关闭它。

1 个答案:

答案 0 :(得分:0)

某些处理器要求您使用.jsx扩展名。

在使用带角度的括号表示法时,尝试将test.js重命名为test.jsx

编辑:显然在代码中重命名