Reactjs 使用在 React 组件中转换 DOM 的 JQuery 插件

不，react会对react之外修改其自身组件dom struct 的任何东西做出糟糕的react (哈哈).这是你永远不想做的事.推荐的解决方案是，在react中复制jquery或类似插件的功能.

话虽如此，对于某些特定的情况，有一种合理的方法可以做到这一点，在这些情况下，您不能没有它，但它本质上意味着在react中封装一些非react 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插件.

这个特定的示例组件没有什么意义，但是您可以看到，这可能会集成到一个更复杂的组件中，同时仍然允许您重新渲染和响应状态更改等.您只是失go 了直接响应事件/修改有关复选框内的内容的能力，就react而言，根本不存在.

现在，在上面的示例中，如果要使用一些react逻辑来添加/删除嵌套的div，那么必须在插入的div周围使用相同的逻辑，并负责重新插入复选框，并使用jquery插件重新初始化它.但是，由于react仅在需要时修改dom，因此不会删除插入的dom内容，除非您以某种方式修改容器div，从而将其删除/重新呈现到dom中.这意味着您仍然可以访问react for the container div等中的所有事件.

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