【问题标题】：Only a ReactOwner can have refs只有 ReactOwner 可以有 refs
【发布时间】：2017-04-03 19:47:21
【问题描述】：

我收到此错误：

错误: (SystemJS) addComponentAsRefTo(...): 只有 ReactOwner 可以有 refs。您可能正在向组件添加一个 ref，该组件不是在组件的 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>
...

【问题讨论】：

标签： javascript reactjs typescript

【解决方案1】：

你得到的错误的核心：

只有 ReactOwner 可以有 refs。

修复

如果render 正在在一个反应组件之外发生，你不应该有一个ref。您的代码就是这种情况：

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

删除ref，这样你就有了：

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

【讨论】：

问题是我需要 ref 来访问 DOM，所以仅仅删除它对我没有帮助。我可以不将渲染更改为您所说的 - 在组件内渲染吗？

【解决方案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"));

【讨论】：