Question

我有一个从道具获得的数组：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的{{1}}中执行componentDidMount时却得到未定义的结果？

Answer 1

好像您在this上遇到了问题。您可以使用箭头功能获取正确的this

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

这是假定此代码位于render函数或具有正确this的任何函数中，后者是组件。

Answer 2

第一个问题是没有绑定的匿名函数，this不会是您期望的内部函数，因此this.children是不确定的。您可以改用提供自动绑定功能的箭头功能：

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

您已经在ref属性中使用了箭头功能，但没有在周围的匿名函数中使用该功能...

第二个问题是this.props.children：不应将其视为数组。如果要迭代React组件的子代，则必须使用React.Children.map(this.props.children, () => ....)

查看React.Children以获得更多详细信息。

向地图添加数组元素？

2 个答案: