は多次元配列

Question

でネイティブ配列マップを反応させるの私は、次のような多次元配列を通じてマッピングする必要があります：

var array=[["1"],["3","8"],["4","8","3"],["4","8","3","9"],["1","8","3","9","2"],["6","8","3","9","2","1"],["4","8","3","9","2","11","2"]] 

このコードは、現在唯一の配列の「列」を介してマッピングします。

var theValue = array.map((key, idx) => { 
    if (key === this.state.active) { 
    return <Main key={key + 'd'} dummy={true} />; 
    } else { 
    if (!this.state.restLayouts[idx]) { 
     var onLayout = function(index, e) { 
     var layout = e.nativeEvent.layout; 
     this.setState((state) => { 
      state.restLayouts[index] = layout; 
      return state; 
     }); 
     }.bind(this, idx); 
    } 
    return (
     <Main 
     key={key} 
     id={key} 
     openVal={this.state.openVal} 
     onLayout={onLayout} 
     restLayout={this.state.restLayouts[idx]} 
     onActivate={this.setState.bind(this, { 
      active: key, 
      activeInitialLayout: this.state.restLayouts[idx], 
     })} 
     /> 
    ); 
    } 
}); 

Answer 1

ここでは、2D配列をテーブルにマッピングする簡単な例を示します。 Flexboxを使用した1行あたりの要素の量に基づく動的幅：

<table style={{ display: 'flex', flexDirection: 'column' }}> 
    <tbody> 
    { 
     array.map(arr => { 
     if (arr === this.state.active) { 
      return (
      <tr style={{ display: 'flex', justifyContent: 'space-around'}}> 
       { 
       arr.map(datum => { 
        return (<th>{datum}</th>); 
       } 
       } 
      </tr> 
     ); 
     } else { 
      return (
      <tr style={{ display: 'flex', justifyContent: 'space-around'}}> 
       { 
       arr.map(datum => { 
        return (<td>{datum}</td>); 
       } 
       } 
      </tr> 
     ); 
     } 
    )) 
    } 
    </tbody> 
</table>