Only a ReactOwner can have refs

0
votes

I am receiving this error:

Error: (SystemJS) addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded.

The network tab on the browser does not show any duplicates being loaded.

enter image description here

Here is my component (TSX):

import * as DOM from "react-dom";
import * as $ from "jquery";
import * as React from "react";

declare var layerslider;

export class LayerSlider extends React.Component<any, {}> {
    element: any;

    componentDidMount() {
        console.log(this.element);

    }

    render() {
        return <div>
            {this.props.children}
        </div>;
    }
}

DOM.render(<div><div ref="element"></div></div>, document.getElementById("lsl"));

I am using system.js as follows.

System.config({
    typescriptOptions: { emitDecoratorMetadata: true },
    map: {
        'react-component': 'ignite/components',
        'jquery': 'lib/jquery/dist/jquery.js',
    },
    paths: {
        'react-dom': "lib-npm/react-dom/dist/react-dom.js",
        'react': "lib-npm/react/dist/react.js"
    },
    packages: {
        app: {
            defaultExtension: 'js'
        },
        'ignite': { main: 'boot.js' },
        'rxjs': { main: 'Rx.js' },
    }
});

the html is...

<layerslider id="lsl">
    <div class="layerslider" style="width: 100%; height: 1200px">
        <div class="ls-slide">
            <img src="~/images/site/home/banner.jpg" class="ls-bg" alt="Image layer">
            <h4 class="ls-l" style="top: 40%; left: 50%; width: 80%; text-align: center" data-ls="@ViewBag.Center">Recognizing your commitment to</h4>
            <h1 class="ls-l green" style="top: 55%; left: 50%; width: 80%; text-align: center" data-ls="@ViewBag.Center">SUSTAINABLE ENERGY</h1>
        </div>
    </div>
</layerslider>
...
2
javascriptreactjstypescript

2 Answers

0
votes

The heart of the error you are getting:

Only a ReactOwner can have refs.

Fix

You should not have a ref if the render is happing outside a react component. This is the case in your code: 

DOM.render(<div><div ref="element"></div></div>, document.getElementById("lsl"));

Remove the ref so that you have : 

DOM.render(<div><div></div></div>, document.getElementById("lsl"));
0
votes

Move the ref from DOM.render into the component to obtain the component reference.

export class LayerSlider extends React.Component<any, {}> {
    ...
    element: any;

    render() {
        // the ref needs to be *here*
        return <div ref="element">
            {this.props.children}
        </div>;
    }
}

Render cannot be in the html below.

DOM.render(
    <div></div>,
    document.getElementById("lsl"));