为什么 React-Magic-Move 示例在 JSFiddle 中出现“只有 ReactOwner 可以拥有 refs”错误？答案

【问题标题】：Why does React-Magic-Move example break in JSFiddle with "Only a ReactOwner can have refs" error?为什么 React-Magic-Move 示例在 JSFiddle 中出现“只有 ReactOwner 可以拥有 refs”错误？
【发布时间】：2015-03-26 00:50:02
【问题描述】：

我想获得在 JSFiddle 工作的漂亮 react-magic-move 组件的“基本”（美国）示例，用于修补。（另请参阅 https://www.youtube.com/watch?v=z5e7kWSHWTg#t=424 上令人印象深刻的视频演示）

我已将 react-magic-move 'dist' 脚本添加到 Base React (JSX) fiddle，以及其他（最低限度适应的）示例 JS/CSS/HTML。你可以在这里看到尝试：

http://jsfiddle.net/69z2wepo/4692/

但是，它在初始渲染后期触发了错误：

Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's 'render' method). Try rendering this component inside of a new top-level component which will hold the ref.

很明显，它正在加载 MagicMove 代码并成功完成大部分渲染：错误后，真实 DOM 已组装。在 React 之后包含 dist 脚本应该可以工作。

认为这可能是 JSFiddle 窗格特有的问题，我在本地文件中尝试了相同的设置：相同的错误。认为这可能是浏览器中的 JSX 交互，我尝试了预编译的 JSX：同样的错误。（见http://jsfiddle.net/5vjqabv3/325/）。首先得到了 React 0.13.1 的错误；尝试回滚到 0.12.0 的基础小提琴：同样的错误。（见http://jsfiddle.net/kb3gN/10548/）

在异常发生的那一刻，当前元素（ReactElement, div, ref 'AL'）有一个空的 _owner 属性——这似乎是关闭的。

任何想法是什么阻止了必要的 React-owner-relationship 设置？ react-magic-move dist 脚本是否以这种所需的“load-after-React”方式损坏或无法使用？

【问题讨论】：

标签： reactjs jsfiddle

【解决方案1】：

这就是我为使示例在本地工作而做的事情

git clone git@github.com:ryanflorence/react-magic-move.git
cd react-magic-move
npm install
scripts/dev-examples

现在在您的浏览器中打开http://localhost:8080/basic/，它可以以某种方式工作

【讨论】：

感谢您确认它确实通过该路径工作！我想建立一个基于官方“dist”脚本的网站......所以真的很想看到一些在 jsFiddle 中工作的东西。
是的，目前我正试图让它在示例之外工作
如果您检查 dist/react-magic-move.js 文件，您会注意到它根据其他答案包含来自 React.js 的一堆东西，这是错误的来源： stackoverflow.com/a/29277601/840099 你最终会得到两个不同的 react.js：一个是你特别包含的，一个是模块内置到分布式 js 文件中的
是的，这看起来像是罪魁祸首...似乎“dist”脚本可能有问题——它肯定需要一个更早的脚本来为它定义 React，但要么 react.js 要么 react-with- addons.js 触发错误。

【解决方案2】：

我在使用不同的反应模块时遇到了类似的情况。我们所做的是给我们的webpack.config.js 添加一个别名react 指向我们的node_modules/react。这可以防止加载任何其他反应实例。它看起来像这样

alias: {
    'react': path.join(__dirname, 'node_modules', 'react')
},

【讨论】：