只有ReactOwner可以具有引用

Question

我收到此錯誤：

錯誤：（SystemJS）addComponentAsRefTo（...）：只有ReactOwner可以具有引用。 您可能正在向未在組件的render方法中創建的組件添加引用，或者您已加載多個React副本。

瀏覽器上的“網絡”選項卡不顯示任何正在加載的重復項。

這是我的組件（ 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"));

我正在使用system.js如下。

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' },
    }
});

的HTML是...

<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

您得到的錯誤的核心：

只有ReactOwner可以具有引用。

固定

如果render器在 react組件外部進行封裝，則不應具有ref 。 在您的代碼中就是這種情況：

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

刪除ref以便擁有：

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

Answer 2

將引用從DOM.render移動到組件中以獲得組件引用。

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

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

渲染不能在以下html中。

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