Question

interface I {
  someMethod();
}

contract C {
  I i;

  C(address _addr) {
    i = I(_addr);
  }

  doSomething() {
    i.someMethod();
  }

  upgrade(address _newAddr) {
    i = _newAddr;
  }
}

Children.map函数（https://reactjs.org/docs/react-api.html）是否会进入“deepest_child”或者直接子进程是否意味着它变为“first_layer”？如果没有，你会如何找到最深的孩子？

Answer 1

您不需要横向嵌套的子项。假设您有这个嵌套对象数组：

const children = [
  {
    id: 1.1,
    secondLayer: {
      id: 1.2,
      deepestLayer: {
        id: 1.3
      }
    }
  },
  {
    id: 2.1,
    secondLayer: {
      id: 2.2,
      deepestLayer: {
        id: 2.3
      }
    }
  },
  {
    id: 3.1,
    secondLayer: {
      id: 3.2,
      deepestLayer: {
        id: 3.3
      }
    }
  }
]

只需访问每个对象的属性，您就可以获得所需的所有信息：

<强>代码：

children.map(nestedObj =>
  <div id={nestedObj.id}>
    <div id={nestedObj.secondLayer.id}>
      <div id={nestedObj.secondLayer.deepestLayer.id}>
      </div>
    </div>
  </div>
)

<强>结果：

<div id="1.1">
  <div id="1.2">
    <div id="1.3"></div>
  </div>
</div>
<div id="2.1">
  <div id="2.2">
    <div id="2.3"></div>
  </div>
</div>
<div id="3.1">
  <div id="3.2">
    <div id="3.3"></div>
  </div>
</div>

正如你所看到的，如果结构太复杂，可能会很难阅读和理解。

您还可以考虑首先解构孩子：

展平功能：

const flatten = children => (
  children.map(child =>{
    const {
      id: firstLayerId, //rename id
      secondLayer: {
        id: secondLayerId, //rename id
        deepestLayer: {
          id: deepestLayerId //rename id
        }
      }
    } = child

    return ({firstLayerId, secondLayerId, deepestLayerId})
  })
)

这里我们遍历children数组，对于每个嵌套对象，我们对它们进行解构，并相应地重命名 id。然后我们返回一个新的1-d对象！结果是：

<强>结果：

[
  { firstLayerId: 1.1, secondLayerId: 1.2, deepestLayerId: 1.3 },
  { firstLayerId: 2.1, secondLayerId: 2.2, deepestLayerId: 2.3 },
  { firstLayerId: 3.1, secondLayerId: 3.2, deepestLayerId: 3.3 }
]

新的结果可以更好地处理，对吧？

Read up on destructuring assignment

React.Children.map函数是否迭代到最深的嵌套子元素？

1 个答案:

您还可以考虑首先解构孩子：