时间戳

首页 > 解决方案 > 如何在反应中呈现矩阵表形式数组

javascript - 如何在反应中呈现矩阵表形式数组

问题描述

我有字符的数组数据

var charArray=['a','b','c','d','e','f','g','h','i','j','k','l ','m','n','o','p'];

并想生成 4X4 的矩阵表，

在javascript中，我将实现结果为

var charArray=['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p'];
var charindex=0;
for(var i=0;i<4;i++){
  var tr='<tr>';
  for(var p=0;p<4;p++){    
    tr+='<td>'+charArray[charindex]+'</td>';
    charindex++;
  }
  tr+='</tr>';
  $('#matrixTable').append(tr);
}
#matrixTable{
  border-collapse:collapse;
}
#matrixTable>tr>td{
  border:1px solid #000;
  padding:10px;
  text-align:center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <table id="matrixTable"></table>
</div>

但是在反应中很难实现，我已经尝试过了，

/*
 * A simple React component
 */
class Application extends React.Component {
  constructor(){
      super()
      this.state={
         charArray:['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P']
      }
   }
  renderTable=()=>{
      let si=0
      let table
      for(let a=0;a<4;a++){
         table+=<tr key={a}>
             <td>{this.state.charArray[si+0]}</td>
             <td>{this.state.charArray[si+1]}</td>
             <td>{this.state.charArray[si+2]}</td>
             <td>{this.state.charArray[si+3]}</td>
          </tr>
         si=si+4
      }    
      return table  
   }
  render() {
    return <div>
      <h4>Matrix Table</h4>
      <table id="table">
        {this.renderTable()}
      </table>  
    </div>;
  }
}

/*
 * Render the above component into the div#app
 */
React.render(<Application />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/0.14.0/react-dom.min.js"></script>
<div id="app"></app>

我如何在 React 上实现它，任何帮助将不胜感激。先感谢您

标签： javascriptreactjs

解决方案

您的原始代码不起作用，因为您将 JSX（对象）与字符串连接起来。将对象转换为字符串时，您会得到[object object]字符串。您需要将表格呈现为 JSX。

由于您知道数字cols（预定义但应该来自道具/状态），您可以找到rows-的数量const rows = Math.ceil(charArray.length / cols)。

现在您可以使用Array.from()to slice 来渲染tr元素，并td从原始数组中获取值，并将它们映射到单元格：

return Array.from({ length: rows }, (_, i) => (
  <tr>
  {
    charArray.slice(i * cols, (i + 1) * cols)
      .map(c => <td>{c}</td>)
  }
  </tr>
))


class Application extends React.Component {
  constructor(){
      super()
      this.state={
         charArray:['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P']
      }
   }
  renderTable=()=>{
    const { charArray = [] } = this.state
    
    const cols = 4 // should come from state or props    
    const rows = Math.ceil(charArray.length / cols)
    
    return Array.from({ length: rows }, (_, i) => (
      <tr>
      {
        charArray.slice(i * cols, (i + 1) * cols)
          .map(c => <td>{c}</td>)
      }
      </tr>
    ))
   }
  render() {
    return <div>
      <h4>Matrix Table</h4>
      <table id="table">
        {this.renderTable()}
      </table>  
    </div>;
  }
}

/*
 * Render the above component into the div#app
 */
React.render(<Application />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/0.14.0/react-dom.min.js"></script>
<div id="app"></app>

推荐阅读