只有ReactOwner可以有refs

Question

我收到此错误：

  

错误：（SystemJS）addComponentAsRefTo（...）：只有ReactOwner可以有refs。您可能正在为未在组件的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才能拥有引用。

修复

如果ref在外面反应组件，则不应该有render。您的代码就是这种情况：

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

删除ref，以便您拥有：

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

Answer 2

将ref从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"));