简体   繁体   中英

Weird issues with react-canvas (Invariant violation)

Using react 0.13.3 and a fresh react-canvas. I'm getting

Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's render method). Try rendering this component inside of a new top-level component which will hold the ref.

With the following piece of code. It's generated from a compile-to-jsx language so looks a bit ugly even after cleaning it up a bit.

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;

});

Obviously got an answer elsewhere immediately after posting this here. So turns out that the ReactCanvas module had bundled a second version of react canvas, which created the issues.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM