javascript - 在组件外部使用 refs

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