使用map处理Props数组并赋值Ref后，componentDidMount中this.childrens为何为undefined？

这个问题我之前也碰到过，核心原因是map回调函数里的this指向不对，导致你没法正确把DOM元素挂载到组件实例的this.childrens上，另外还要确认数组初始化是否正确。

为什么原来的代码会出现undefined？ #

你在map里用了普通的function作为回调，在这种情况下，函数内部的this默认不会指向组件实例（严格模式下是undefined）。所以当你在ref里写this.childrens[i] = div时，这个this根本不是组件的this，自然组件实例上的this.childrens就不会被赋值，打印出来就是undefined。

另外还要确保你在构造函数里确实把this.childrens初始化为了空数组，如果只是声明没赋值，那它本身就是undefined，后续赋值也不会生效：

constructor(props) {
  super(props);
  this.arrayContenido = this.props.children;
  this.childrens = []; // 必须初始化为空数组，这一步很关键！
}

修复方案 #

最简单的解决办法是把map的回调改成箭头函数，箭头函数会自动继承外层作用域的this（也就是组件实例）：

{this.arrayContenido.map((item, i) => (
  <div key={i} ref={div => (this.childrens[i] = div)}>
    {item}
  </div>
))}

如果你习惯用普通函数，也可以通过bind手动绑定this：

{this.arrayContenido.map(function(item, i) {
  return (
    <div key={i} ref={div => (this.childrens[i] = div)}>
      {item}
    </div>
  );
}.bind(this))}

验证修复 #

修改后，在componentDidMount里打印this.childrens，就能看到每个DOM元素都被正确存入数组了，接下来就可以用GSAP对这些元素做动画啦。

内容的提问来源于stack exchange，提问作者user10637450