ReactJS-使用ES6发电机的嵌套元素的递归方法

Question

在React应用中，为了通过嵌套数组循环，我正在使用类似的方法：

recursiveMethod = () => {
 // some code... 
this.recursiveMethod();
}

但是，我认为它看起来不好，我想改用ES6发电机。

类似：

function* genFunc() {
  ...
  yield; 
  ...
}

，但我不确定代码样式的外观。我需要一个可以在其他方法中使用的函数。例如，在末尾返回数组的函数。我想用其他方法调用该函数，例如render（）{...}并获取结果数组。

更新1：我在嵌套数组中还有其他一些值，我想将其作为输出。如果我在同一块中使用两次产量，可以吗？我的意思是在以下代码的其他{}块中：

if (condition) {
      yield element;
    } else {
      yield element;
      yield* traverseNested(element);
    }

更新2 根据其他值，我的意思是：

[{
   key1: value1,
   key2: value2,
   key3: { iterMe : {
            otherKey: otherValue,
            otherKey: otherValue,
            iterMe : { iterMe : {...} }}
    }
   },{},{},{}]

Answer 1

您可以尝试嵌套数组，我也在尝试这些。因此，请彻底测试。

• 首先检查数据是否存在
• 现在，循环穿过数组
• 如果您遇到除阵列以外的任何其他内容，请产生值
• 其他数据子集产生功能，类似于递归函数

与React一起工作工作demo

注意：这以深度的第一种方式穿越嵌套数组。

const k = [10, [20], [[1, [2, 3, 4]]]];
function* traverseNested(data){
  if (!data) { return; }
  for(var i=0; i<data.length; i++) {
    var element = data[i];
    element instanceof Array 
     ?
     yield* traverseNested(element)
     : 
     yield element    
  }
}
let iter = traverseNested(k);
let res = iter.next()
while(!res.done){
  console.log(res.value);
  res = iter.next();
}
// Or this for .. of iterator can also be used
// for (let res of iter) { 
//   console.log(res); 
// }