actjs — Построить динамическую таблицу, используя данные массива, сгенерированные из PHP в JSX / React

Question

actjs — Построить динамическую таблицу, используя данные массива, сгенерированные из PHP в JSX / React

Я пытаюсь построить таблицу, динамически генерируемую из выходного массива сценария PHP. Я получаю следующий вывод после того, как componentWillMount выполняется. Но я пытаюсь использовать эти данные (первые 4 строки — одна строка) и построить таблицу. Но я не могу понять, как использовать этот массив данных и преобразовать его в таблицу динамически. Любые материалы высоко ценятся.

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
10componentWillMount: 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>
)

2

php react-jsx reactjs

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Что я делаю, так это то, что я создаю 2-мерный массив, который я передаю компоненту List. Если вы знаете, что каждая группа из 4 в массиве, который вы получаете из сценария php, является строкой, тогда вы просто используете цикл 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>
);

3