使用在React Components中转换DOM的JQuery插件？

Question

一些JQuery插件不只是向DOM节点添加行为,而是更改它们.例如,Bootstrap Switch转向

<input type="checkbox" name="my-checkbox" checked>

变成类似的东西

<div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-on bootstrap-switch-large bootstrap-switch-animate">
  <div class="bootstrap-switch-container">
    <span class="bootstrap-switch-handle-on bootstrap-switch-primary">ON</span>
    <label class="bootstrap-switch-label">&nbsp;</label>
    <span class="bootstrap-switch-handle-off bootstrap-switch-default">OFF</span>
    <input type="checkbox" name="download-version" checked="" data-size="large" data-on-text="3" data-off-text="2.0.1">
  </div>
</div>

同

$("[name='my-checkbox']").bootstrapSwitch();

哪个与React不相符:

Uncaught Error: Invariant Violation: findComponentRoot(..., .0): Unable to find
element. This probably means the DOM was unexpectedly mutated (e.g., by the
browser), usually due to forgetting a <tbody> when using tables or nesting <p> or
<a> tags. ...<omitted>...`. 

是否有推荐的技术将这些插件合并到React组件中？或者它们是否从根本上打破了React的假设并且无法使用它？

Answer 1

不,反应会对任何在反应之外修改其自身组件dom结构的东西产生严重反应(哈哈).这是你不想做的事情.建议的解决方案是复制您尝试使用jquery或类似插件执行的任何功能.

话虽如此,有一种合理的方法可以为特定情况做到这一点,你不能没有它,但它本质上意味着包装一些无反应的dom内部反应.

例:

var Example = React.createClass({
    componentDidMount: function() {
        var $checkboxContainer = $(this.refs.checkboxContainer.getDOMNode());

        var $checkbox = $('<input />').prop('type', 'checkbox');

        $checkboxContainer.append($checkbox);

        $checkbox.bootstrapSwitch({});
    },
    render: function() {
        return (
            <div>
                <div ref="checkboxContainer"></div>
            </div>
        )
    }
});

现在,您正在使用嵌套div渲染组件.嵌套div第一次安装到dom时,嵌套div将获得一个jquery附加的复选框,然后它将在其上执行我们的jquery插件.

这个特定的示例组件没有什么意义,但是您可以看到它如何集成到更复杂的组件中,同时仍然允许您重新呈现和响应状态更改等.您只是失去了直接对事件做出反应/修改的能力在所讨论的复选框内的内容,就反应而言,不存在.

现在有了上面的例子,如果你有一些反应逻辑来添加/删除嵌套的div,你必须在插入的div周围有相同的逻辑负责重新插入复选框并重新初始化它jquery插件.但是因为react只在需要时修改了dom,所以这个插入的dom内容不会被删除,除非你做了一些修改容器div的方法,导致它被删除/重新渲染到dom.这意味着您仍然可以访问该容器div等的所有响应事件.

您还可以利用componentDidMount函数进行反应,将事件或回调绑定到复选框本身的特定交互.只需确保componentWillUnmount在特定情况下的组件生命周期中正确解除绑定或在任何有意义的位置解除绑定.

Answer 2

在这个伟大的ryanflorence的教程中,您将了解如何执行此操作:

包装DOM Libs

方法

1. DOM库通常操纵DOM
2. React试图重新渲染并找到一个与上次不同的DOM并且吓坏了
3. 我们通过打破渲染树然后重新连接lib操作的DOM来隐藏来自React的DOM操作.
4. 我们组件的消费者可以留在React-land.

Answer 3

当然,有这样一种技术.我们一直在做这些事情.

1. 您创建React组件来包装jQuery插件.
2. 在你的内心render(),你返回一个空的<div ref="placeholder" />
3. 在componentDidMount方法中,您通过其ref检索此元素,并在那里初始化您的jQuery插件.
4. 在你的componentWillUnmount,你清理它.调用'destroy'或其他任何需要避免内存泄漏的东西.

而已.幸运的是,在React中以这种方式修改DOM是完全安全的.

如果你想让这个插件对道具变化作出反应,事情会变得有点棘手.您需要覆盖其他生命周期方法,例如componentWillReceiveProps,检查道具实际更改的时间,并调用相应的插件方法.我可以更详细地解释一下,如果你有具体的问题,整个主题对于评论来说过于宽泛.