使用从 JSX/React 中的 PHP 生成的数组数据构建动态 table

Question

我正在尝试构建一个从 PHP 脚本的输出数组动态生成的 table。执行 componentWillMount 后，我得到以下输出。但我正在尝试使用此数据（前 4 行是一行）并构建一个 table。但我无法获得如何使用此数组数据并将其动态转换为 table。任何输入都非常感谢。

2016-08-24 20:24:06
2016-08-24 20:24:06
test01
20
2016-08-19 08:14:25
2016-08-19 08:14:25
test02
10


  componentWillMount: function () {
        $.ajax({
            type: "GET",
            crossDomain: true,
            url: "http://localhost:8080/myscript.php",
            success: function(data){
                alert(data);
                this.setState({testRows: data});
            }.bind(this),
            error:function(data)
            {
                alert("Data sending failed");
            }
        });
    },
 return(
  <tbody>
  {this.state.testRows.map(function(row, i) {
  return (
  <tr key={i}>
  {row.map(function(col, j) {
  return <td key={j}>{col}</td>;
  })}
 </tr>
  );
  })}
 </tbody>
)

Answer 1

我所做的是创建一个二维数组，并将其传递给列表组件。如果您知道从 php 脚本获得的数组中的每组 4 都是一行，那么您只需使用这样的 for 循环。（phpResponse 是来自 php脚本）

var tableData = [];
var tableRow = [];
for(var x = 1; x <= phpResponse.length; x++) {
    tableRow.push(phpResponse[x]);
    if (x % 4 == 0) {
        tableData.push(tableRow);
        tableRow = [];
    }
}

然后像这样使用 tableData

return(
    <tbody>
         {tableData.map((row, index) => {
             return (
                 <tr key={"row_" + index}>
                     {row.map((cell, index) => {
                         return (
                             <td key={"cell_" + index}>{cell}</td>
                         );
                     })}
                 </tr>
             );
         })}
    </tbody>
);

使用从 JSX/React 中的 PHP 生成的数组数据构建动态 table

Build a dynamic table using array data generated from PHP in JSX/React

php

reactjs

react-jsx