Question

我希望得到基本的＆＃39; （US States）在JSFiddle工作的漂亮react-magic-move组件的示例，用于修补。（另见https://www.youtube.com/watch?v=z5e7kWSHWTg#t=424）令人印象深刻的视频演示

我已添加了反应 - 魔法 - 移动＆＃39; dist＆＃39; Base React（JSX）小提琴的脚本，以及另一个（最低限度适应的）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＆＃39; AL＆＃39;）具有null _owner属性 - 这似乎是关闭的。

有什么想法阻止建立必要的React-owner-relationship？反应 - 魔法 - 移动dist脚本是否在此期望的“反应后加载”中被破坏或无法使用？方式？

Answer 1

这就是我为了让示例在本地工作而采取的措施

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

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

Answer 2

我遇到了与不同反应模块类似的情况。我们所做的是为指向webpack.config.js的名为react的{{1}}添加别名。这可以防止任何其他反应实例加载。它看起来像这样

node_modules/react

为什么React-Magic-Move示例在JSFiddle中打破“只有一个ReactOwner可以有引用”错误？

2 个答案: