ReactJS中使用此项的动态变量名

Question

我想在不使用React.createRef()的情况下为40个div创建多个ref。但我无法为我的引用创建动态变量名。我正在使用以下代码创建引用

const displayXmasTreeParts = () => Array(40).fill().map((el, index) => (
<div className={`xmasTreePart${randomClass}`} key={`part${index}`} 
ref={el => [this.el`${index}`] = el}/>
);
const handleClick = () => this.el5.classList.add(`new-class`);
render() {
return (
<div className="xmasTree">
{this.displayXmasTreeParts()}
</div>
<button className="SetUpTree" onClick={this.handleClick}>Click here to reveal Our Xmas Tree</button>
)}

我也试过这个ref={el => `this.el${index}` = el}

但在这两种情况下都得到了这个错误Invalid left-hand side in assignment expression。

Answer 1

怎么样

ref={el => {this["el"+index] = el}}/>

Answer 2

您需要将refs存储在数组中

class Component {

let _refs = [];

displayXmasTreeParts = () => Array(40).fill().map((el, index) => {

_refs = [];

return (
<div className={`xmasTreePart${randomClass}`} key={`part${index}`} 
ref={el => _refs.push(el)}/>
);
}


...

}