只有ReactOwner可以具有引用

Question

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.

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

Answer 1

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"));

Answer 2

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"));