使用在React Components中转换DOM的JQuery插件？ [英] Using JQuery plugins that transform the DOM in React Components?

问题描述

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

Some JQuery plugins don't just add behavior to DOM nodes, but change them. For example, Bootstrap Switch turns

< input type =checkboxname =my-checkboxchecked>

类似于

<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>

with

$（[name ='my-checkbox']）。bootstrapSwitch（）;

与React不相符：

Which doesn't jive with 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的假设并且无法使用它？

Is there a recommended technique for incorporating these plugins into React components? Or do they fundamentally break the assumptions of React and cannot work with it?

推荐答案

不，反应会对哈哈做出反应（哈哈）在反应之外修改自己的组件dom结构的任何东西。这是你不想做的事情。建议的解决方案是复制你正在尝试使用jquery或类似插件做什么的功能。

No, react will react (haha) badly to anything that modifies its own component dom structure outside of react. This is something you don't ever want to do. The recommended solution would be to replicate the functionality of whatever you're trying to do with a jquery or similar plugin, in react.

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

Having said that, there is a reasonable way to do this for specific instances where you just can't do without it, but it essentially means wrapping some non-react dom inside react.

示例：

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插件。

Now of course you are rendering a component with a nested div. The nested when mounted to the dom for the first time that nested div will get a checkbox appended to it by jquery, which will then also execute our jquery plugin on it.

这个特殊的示例组件没有什么意义，但是你可以看到它如何集成到一个更复杂的组件中，同时仍允许你重新渲染和响应状态你只是失去了直接对事件做出反应/修改所讨论的复选框内部内容的能力，就反应而言，这种情况并不存在。

This particular example component has little point to it, however you can see how this might integrate into a more complex component while still allowing you to re-render and react to state changes etc. You just lose the ability to directly react to events/modify things inside of the checkbox in question which as far as react is concerned, doesn't exist.

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

Now with the above example if you were to have some react logic to add/remove the nested div, you'd have to have the same logic around that div being inserted be responsible for re-inserting the checkbox and re-initializing it with the jquery plugin. However because react only modifies the dom when needed, this inserted dom content wont be removed unless you do something that modifies the container div in a way that causes it to be removed/re-rendered to the dom. This means you can still access all of the events within react for that container div etc.

您还可以使用 componentDidMount 函数响应绑定事件或回调到复选框本身的特定交互。只需确保在 componentWillUnmount 中正确解除绑定，或者在特定情况下在组件生命周期中将其解除绑定。

You could also make use of the componentDidMount function in react to bind events or callbacks to specific interactions on the checkbox itself. Just make sure to unbind them correctly in componentWillUnmount or wherever it makes sense to do so in the component lifecycle in your specific case.

这篇关于使用在React Components中转换DOM的JQuery插件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！