在組件外部使用refs

Question

我有一個ImageListComponent ，其中包含一個<ReactSwipe>元素的數組。 每個元素都使用ref={rid}具有唯一ID，並且可以使用兩個幻燈片進行滑動。 ImageListComponent正在另一個名為<CarFromImage>組件中使用，該組件包含向<ImageListComponent>添加和刪​​除圖像的方法。

我遇到的問題是在<ImageListComponent>內部，我能夠使用方法this.refs[rid].swipe.prev()以編程方式刷一個元素，但如果我想使用此方法並引用它，這是不可能的<CarFromImage>中的<CarFromImage>元素。

ImageListComponent.jsx一些代碼：

             this.props.images.map(function(image, i){

                var rid = "ReactSwipe" + i; 

                return (<ReactSwipe ref={rid} key={i}>
                        <div>
                            <div>Something<div/>
                        </div>
                        <div>
                            <div style={styles.deleteIcon} onClick={this.props.deleteImage.bind(this, image, rid)}/>
                        </div>
                    </ReactSwipe>)
              }

CarFromImage.jsx一些代碼：

    render: function () {
         return <ImageListComponent carImages={this.state.car.images} addImage={this.addImage} deleteImage={this.deleteImage}/>  

我希望在CarFromImage.jsx使用它的CarFromImage.jsx ：

    deleteImage: function(selectedImage, rid){
        this.getFlux().actions.car.deleteImageFromCar(selectedImage);        
        this.refs[rid].swipe.prev();
    }

有沒有人之前在其組件之外使用過ref並且知道如何攻擊這個問題或者有其他建議嗎？ 如果沒有別的，我可以將所有內容都放在一個大的.jsx文件中，但我希望能夠將我的項目拆分成更小的組件。 任何幫助將非常感激！

Answer 1

如果為您的父節點分配引用。

喜歡：

render: function () {
     return <ImageListComponent carImages={this.state.car.images} addImage={this.addImage} deleteImage={this.deleteImage} ref="parent" />
}

難道你不能得到孩子的參考：

deleteImage: function(selectedImage, rid){
    this.getFlux().actions.car.deleteImageFromCar(selectedImage);        
    this.refs.parent.refs[rid].swipe.prev();
}

演示： http ： //jsbin.com/yixujofixi/1/edit？js，output