在组件外部使用 refs

Question

我有一个包含一组元素的ImageListComponent。每个元素都使用ref={rid}具有唯一的id，并且可以滑动两个幻灯片。ImageListComponent在另一个名为的组件中使用，该组件包括向添加和删除图像的方法。

我遇到的问题是，在内部，我能够使用this.refs[rid].swipe.prev()编程地滑动一个元素，但是如果我想在中使用此方法并引用特定元素，则无法实现。

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中使用以下方法：

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

有没有人曾经在组件之外使用过ref并了解我该如何解决此问题或是否有其他建议？如果没有其他方法，我可以将所有内容放在一个大的.jsx文件中，但是我希望能够将我的项目拆分成更小的组件。非常感谢您提供的任何帮助！

- user2236165

---

你说ImageListComponent包含一组<ReactSwipe>元素的数组，但是你的示例代码并没有。 - Sander Garretsen

对不起，我修改了示例代码。 - user2236165

Answer 1

如果您将一个 ref 分配给父节点。 例如：

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

（注：此处为HTML代码，无需翻译）

- OllieH