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的每行元素数量：

<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>

React Native数组映射与多维数组

1 个答案: