javascript - 如何在 react 中渲染矩阵表形式数组

Question

我有类似字符的数组数据

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>

但是在 React 中实现它变得越来越困难，我已经尝试过了，

/*
 * 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 上实现它，任何帮助将不胜感激。预先感谢您

Answer 1

您的原始代码不起作用，因为您正在将 JSX(对象)与字符串连接起来。将对象转换为字符串时，您将获得 [object object] 字符串。您需要将表呈现为 JSX。

由于您知道数字 cols(预定义，但应该来自 props/state)，因此您可以找到 rows 的数量 - const rows = Math. ceil(charArray.length/cols).

现在您可以使用 Array.from() 进行切片以渲染 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>