React Ref：对象数组的 Ref 函数仅记录第一项

Question

我映射了来自外部 API 的对象数组，成功显示了它们的内容。我现在正尝试通过 React ref 访问他们各自的 clientHeights，但当我登录到我的控制台时，它似乎只输出第一个项目：


class ImageList extends React.Component{
  constructor(props){
    super(props)

    this.imageRef = React.createRef()
    
  }
  

  componentDidMount(){
    console.log(this.imageRef)
  }
  
  
  render(){

    
    const images= this.props.images.map((image)=>{
      
      return( 
          <img ref={this.imageRef}
               key={image.id} 
               src={image.urls.regular}
               alt={image.description} />
      )})
      
      
      return(
        <div  className="image-list" >
          {images}
        </div>
      
    )
    
  }
  
  
}

我正在尝试获取他们所有的 clientHeights 而不仅仅是第一个。谢谢

Answer 1

您的代码会将每个 img 节点分配给 this.imageRef。我不确定为什么要保留第一个参考，但无论哪种方式，它都不会像您期望的那样工作。要获取 img 节点数组，您需要将 ref 设为数组并将每个节点添加到其中。 ref prop 可以是一个函数，所以试试这样的东西

class ImageList extends React.Component{
  constructor(props){
    super(props)
  }
  

  componentDidMount(){
    console.log(this.imageRefs)
  }
  
  
  render(){
    this.imageRefs = []
    
    const images= this.props.images.map((image)=>{
      
      return( 
          <img ref={ref => {this.imageRefs.push(ref)}}
               key={image.id} 
               src={image.urls.regular}
               alt={image.description} />
      )})
      
      
      return(
        <div  className="image-list" >
          {images}
        </div>
      
    )
    
  }
  
  
}

Answer 2

我得到的另一种方法（从教程中得到）是将图像及其内容显示为另一个组件（将其称为 ImageCard- 我现在放置参考的位置）然后显示该组件代替原始 <img/> 标签，如下所示：

class ImageList extends React.Component{

  

  
  
  render(){
    
    
    const images= this.props.images.map((image)=>{
      
      return( 
          <ImageCard key={image.id} image= {image}/>
      )})
      
      console.log(images);
      return(
        <div  className="image-list" >
          {images}
        </div>
      
    )
 
  }
  
  
}

这使得对 ImageCard 组件所做的任何操作也得到映射。顺便说一句，我现在刚看完这个

React Ref：对象数组的 Ref 函数仅记录第一项

React Ref: Ref function for an array of objects only logs 1st item

javascript

ref

reactjs