用map添加元素到Array？

Posted 2021-05-06

我有一个我从道具得到的数组：this.arrayContenido = this.props.children;。如果我console.log这个，我有一个像这样的数组：https://puu.sh/Dlsce.png

好吧，我需要拆分这个数组，用gsap为它们设置动画效果。我映射了这个数组，并将这个数组的每个元素分配给新数组（构造函数中的this.children =[]）：

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

为什么当我在console.log为componentDidMount做this.childrens我有未定义的结果？

答案

看起来你有this的问题。您可以使用箭头功能来获得正确的this

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

这假设这个代码位于render函数或具有正确this的任何函数，这是组件。

另一答案

第一个问题是没有绑定的匿名函数，this将不是你所期望的，因此this.children将是未定义的。您可以使用箭头功能代替提供自动绑定：

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

你已经在ref prop中使用了箭头函数，但是在周围的匿名函数中却没有...

第二个问题是this.props.children：它不应该被视为一个数组。如果你想迭代一个React组件的子节点，你必须使用React.Children.map(this.props.children, () => ....)

请查看React.Children了解更多详情。