在组件

Question

我有ImageListComponent，其中包含<ReactSwipe>元素数组。每个元素都使用ref={rid}具有唯一ID，并且可以使用两张幻灯片进行滑动。 ImageListComponent正在另一个名为<CarFromImage>的组件中使用，其中包含向<ImageListComponent>添加和删除图像的方法。

我遇到的问题是<ImageListComponent>内部我可以使用方法this.refs[rid].swipe.prev()以编程方式刷一个元素但如果我想使用此方法并引用特定的方法，这是不可能的<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中使用它的方法：

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

之前是否有人在其组件外部使用过ref并知道如何解决此问题或者有其他建议？如果没有别的，我可以将所有内容都放在一个大的.jsx文件中，但我希望能够将我的项目拆分成更小的组件。任何帮助将不胜感激！

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