只有ReactOwner可以擁有參考。您可能正在向組件的渲染方法中添加ref但不是在組件的渲染方法中創建的。

我寫了一個自包含的組件，它可以正常工作如果我將此組件作爲獨立組件運行。我想將這個組件作爲NPM模塊發佈，這樣我就可以共享這個組件。在我的示例應用程序中，我定義了package.json中模塊的路徑，並且它正在被NPM拉下來。我使用的WebPack捆綁併成功構建一個軟件包，但是當我運行在瀏覽器的代碼，我得到只有ReactOwner可以擁有參考。您可能正在向組件的渲染方法中添加ref但不是在組件的渲染方法中創建的。

未捕獲不變違規：addComponentAsRefTo（...）：只有 ReactOwner可以有裁判。你可能會增加一個裁判，這不是一個組件的渲染方法內創建一個組件，或者你有的反應裝

的多個副本，我花了一整天時間，並試圖幾個黑客，但我不能找到問題的確切根本原因？

來源

2016-06-27 Sunny

您可能會使用多個版本的反應。在node_modules中檢查你的模塊，並確保 –

我已經檢查了反應版本，並且反應版本沒有問題。我使用ref作爲我的反應組件中的dom遍歷。 – Sunny

我認爲Dominic意味着你可能有多個反應實例。你的文章似乎表明該組件是獨立的 - 你的意思是它包括反應和渲染本身？如果是這樣，那麼如果您在反應項目中使用它，可能會出現問題。 –

在你的WebPack配置在外部配置使用，如：

output: { 
    path: __dirname + "/dist", 
    filename: 'bundle.js', 
    // library: 'hello-007', 
    libraryTarget: 'umd', 
    }, 
    externals: [{ 
    'react': { 
     root: 'React', 
     commonjs2: 'react', 
     commonjs: 'react', 
     amd: 'react' 
    } 
    }, { 
    'react-dom': { 
     root: 'ReactDOM', 
     commonjs2: 'react-dom', 
     commonjs: 'react-dom', 
     amd: 'react-dom' 
    } 
    }], 
    module : { 
    loaders : [ 
     { 
     test : /\.js?/, 
     loader : 'babel' 
     } 
    ] 
    },

來源

2016-07-06 10:34:42

還有其他辦法可以在代碼中的裁判這也是解決這一問題。使用引用這樣

<div className="nav-window-content" 
      ref={(node) => this.menuList = node}> 

and for getting the reference use 
this.menuList

來源

2016-07-06 10:39:31 Sunny

只有ReactOwner可以擁有參考。您可能正在向組件的渲染方法中添加ref但不是在組件的渲染方法中創建的。

回答

相關問題