在组件外部使用 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

在组件外部使用 refs

Using refs outside component

javascript

ref

reactjs

react-jsx