react-canvas的奇怪问题(不变冲突)

Question

使用react 0.13.3和一个新的react-canvas。我得到了

不变冲突: addComponentAsRefTo(...)：只有ReactOwner才能有ref。这通常意味着您正在尝试向没有所有者的组件添加引用(即，不是在另一个组件的render方法中创建的)。尝试在一个新的顶级组件中呈现此组件，该组件将包含ref。

使用下面这段代码。它是从编译到jsx语言生成的，所以即使经过一些清理，看起来也有点难看。

define(["reactcanvas", "layout", "jquery", "underscore", "react"],
function(ReactCanvas, Layout, $, _, React){
    var
        ReactCanvas_Surface = ReactCanvas.Surface,
        ReactCanvas_Image = ReactCanvas.Image;

    var ReactCanvas_Surface_Factory = React.createFactory(ReactCanvas.Surface);
    var ReactCanvas_Image_Factory = React.createFactory(ReactCanvas.Image);
    var App = React.createClass({

        render: function render(){
            return (
                ReactCanvas_Surface_Factory({
                        top:0,
                        left:0,
                        width:420,
                        height:420
                    }, ReactCanvas_Image_Factory({
                        src:"img/tits.jpg"
                    }))

            );
        }

    });

    var App_Factory = React.createFactory(App);
    App.createMain = function createMain(el,data){

        React.render(App_Factory(), el[0]);
    }
    return App;

});

Answer 1

显然，在这里发布了这篇文章后，立即在其他地方得到了答案。因此，事实证明，ReactCanvas模块捆绑了react canvas的第二个版本，这导致了问题。