Question

我使用名为slick的插件将div列表转换为轮播。现在我想使用函数调用$('.slider').slick('slickRemove',index);从轮播中删除选定的div。这将更改原始DOM结构并导致React中的Uncaught Invariant Violation。那么使用更改React中原始DOM的jQuery插件的最佳方法是什么？

var ImageItem = React.createClass({
    render: function(){
        return (
        <div className="center-inline imageItem">
            // onClick deleted this div
            <button className="circular red extra-mini ui icon button top-right"
                    onClick={this.props.onclick.bind(null, this.props.url)}>
                <i className="large remove icon"></i>
            </button>
            <img className="center-block" src={this.props.url} />
        </div>
        );
    },
});

var ImageSlider = React.createClass({
    getInitialState: function(){
        return {
            urls: ["/static/img/oned.jpg", "/static/img/oned2.jpg", "/static/img/oned3.jpg"],
        };
    },
    componentDidMount: function(){
        //call slick plugin
        $(ReactDOM.findDOMNode(this.refs.imgSlider)).slick({
            infinite: false,
            mobileFirst: true,
            lazyLoad: 'ondemand',
        });
    },
    deleteImg: function(url){
        var index = 0;
        for(var i=0;i<this.state.urls.length;i++){
            if(this.state.urls[i] == url){
                index = i;
                break;
            }
        }
        // update urls, delete the selected url
        newUrls = this.state.urls
        newUrls.splice(index, 1);
        this.setState({
            urls: newUrls,
        },function(){
            // delete the selected div
            $(ReactDOM.findDOMNode(this.refs.imgSlider)).slick('slickRemove', index);
        });
    },

    render: function() {
        items = [];
        this.state.urls.forEach(function(u){
            items.push(<ImageItem url={u} key={u} onclick={this.deleteImg} />)
        }.bind(this));

        return (
            <div>
                <div ref="imgSlider" className="imageSlider">
                {items}
                </div>
            </div>
        );
    },
});

Answer 1

这样做非常棘手，基本上你必须做出反应忽略这些元素。这里有一个很好的教程，但如果你看到另一种方式，我不建议这样做：https://github.com/ryanflorence/react-training/blob/gh-pages/lessons/05-wrapping-dom-libs.md

使用在React中更改DOM的jQuery插件

1 个答案: