React中map循环，如何给每个元素建立ref

Question

多个图片数组map，需要给每个图片加上ref，这样之后好控制
ref正常的写法是<input ref=(input => this.inputElement = input) />
但是我这边是动态的，之后需要获取每个图片来控制，想问下有什么好一点的办法呢？
下图时我想写的，但是不行

// 函数
imgRef(ele:HTMLElement, index:number) {
    this['ele'+index] = ele;
}
// render 里的渲染
{
    srcs.map((src, i) => {
        const frameStyle = {zIndex: 99 - i};
        return <img ref={(ele:HTMLElement, i:number) => this.imgRef(ele, i)} key={i} src={src} />
    })
}

Answer 1

单纯获取列表子节点的话，直接ref找到父元素就好了。。

class App extends Component {
  ulRef = createRef()

  componentDidMount() {
    console.log(this.ulRef.current.childNodes)
  }
  
  render () {
    return (
      <div className="App">
        <header className="App-header">
          <ul ref={this.ulRef}>
            {Array(10).fill(1).map((item, index) => <li>
              {index}
            </li>)}
          </ul>
        </header>
      </div>
    );
  }
}

Answer 2

用数组或者对象挂载就行了 this.refs = [ ]; 或者 this.refs = {};

{
    srcs.map((src, i) => {
        const frameStyle = {zIndex: 99 - i};
        return <img ref={img => this.refs[i] = img } key={i} src={src} />
    })
}

Answer 3

这个方法定义好ref后如何调用？？？`
<img ref={(ele:HTMLElement, i:number) => this.imgRef(ele, i)} key={i} src={src} />