只有ReactOwner可以有裁判

Question

我收到此错误：

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.

在浏览器的网络选项卡不显示正在加载的任何重复。

这里是我的组件（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

从DOM.render将裁判到组件，以获得该组件的参考。

渲染不能在html下面。

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

Answer 2

你所得到的错误的心脏：

Only a ReactOwner can have refs.

修复

你不应该有一个ref如果render在以外的地方有一个反应组分。这是你的代码的情况下：

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

取出ref，让您有：

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