我对 ReactJS 和编码都很陌生，我正在尝试使用“react-data-grid”渲染一个反应数据网格。现在这个网格由两个数组组成，一个行数组和一个列数组。现在我创建了函数来推送和弹出数组以添加或删除列和行。
问题是，它实际上是在行中呈现变化，而不是在列中。我问过我一个更有经验的同事，但他无法帮助我。但是，我们记录了控制台，“引擎盖下”的一切工作正常，只是没有渲染：
我将代码分为表格部分和渲染部分：
Import React from "react";
import ReactDOM from "react-dom";
import {Table} from "./react_table"
import {columnsArray} from "./react_table";
import {rowsArray} from "./react_table";
let columnsId = 1;
function columnsCreator (columnsCount) {
columnsArray.push({key: `id${columnsCount}`, name: `Title${columnsCount}`});
columnsId++;
if (typeof rowsArray !== "undefined" && rowsArray.length === 0) {
rowsArray.push({});
}
}
function rowsCreator () {
rowsArray.push({});
}
function columnsEraser () {
columnsArray.pop();
columnsId--;
}
function rowsEraser () {
rowsArray.pop();
}
for (let i = 1; i <= 10; i++) {
columnsCreator(columnsId);
}
for (let i = 1; i <= 10; i++) {
rowsCreator();
}
for (let i = 1; i <= 5; i++) {
columnsEraser();
}
for (let i = 1; i <= 5; i++) {
rowsEraser();
}
class SiteRenderer extends React.Component {
constructor(props) {
super(props);
this.state = {
columnsNumber: columnsArray.length,
rowsNumber: rowsArray.length
};
this.increaseColumnsNumber = this.increaseColumnsNumber.bind(this);
this.increaseRowsNumber = this.increaseRowsNumber.bind(this);
this.decreaseColumnsNumber = this.decreaseColumnsNumber.bind(this);
this.decreaseRowsNumber = this.decreaseRowsNumber.bind(this);
}
increaseColumnsNumber() {
columnsArray.push({key: `id${columnsId}`, name: `Title${columnsId}`});
columnsId++;
if (typeof rowsArray !== "undefined" && rowsArray.length === 0) {
rowsArray.push({});
}
this.setState ({
columnsNumber: columnsArray.length + 1
})
}
increaseRowsNumber() {
rowsArray.push({});
this.setState ({
rowsNumber: rowsArray.length + 1
})
}
decreaseColumnsNumber() {
columnsArray.pop();
columnsId--;
this.setState ({
columnsNumber: columnsArray.length - 1
})
}
decreaseRowsNumber() {
rowsArray.pop();
this.setState ({
rowsNumber: rowsArray.length - 1
})
}
render() {
return(
<div>
<h1>React-Table</h1>
<h2>Length of Column Array: {columnsArray.length}</h2>
<h2>Length of Row Array: {rowsArray.length}</h2>
<Table columnsNumber={this.state.columnsNumber} rowsNumber={this.state.rowsNumber}/>
<button type="button" id="btnCreateColumn" className="tableButtons" onClick={this.increaseColumnsNumber}>Add Column</button>
<button type="button" id="btnCreateRow" className="tableButtons" onClick={this.increaseRowsNumber}>Add Row</button>
<button type="button" id="btnEraseColumn" className="tableButtons" onClick={this.decreaseColumnsNumber}>Remove Column</button>
<button type="button" id="btnEraseRow" className="tableButtons" onClick={this.decreaseRowsNumber}>Remove Row</button>
</div>
)
}
}
ReactDOM.render(<SiteRenderer/>, document.body.appendChild(document.createElement("div")));
然后是表格文件
import React from "react";
import ReactDataGrid from "react-data-grid";
export const columnsArray = [];
export const rowsArray = [];
const columnGetter = columnsNumber => columnsArray[columnsNumber];
const rowGetter = rowsNumber => rowsArray[rowsNumber];
export class Table extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<ReactDataGrid
columns={columnsArray}
rowGetter={rowGetter}
columnGetter={columnGetter}
rowsCount={rowsArray.length}
enableCellSelect={true}
rowHeight={50}
minHeight={50*rowsArray.length + 55}
resizable={true}
/>
</div>
)
}
}
首先，我知道代码目前还不是很完美，我在尝试的过程中改变了很多，而且很乱，抱歉，我打算在发现问题后对其进行优化。
我也知道创建或删除列和行的每个函数都是双重的，SiteRenderer-Component 之外的方法只是为了测试，现在我用它在页面加载时创建一个起始表（这也适用于列，但不适用于之后发生变化，与始终有效的行相反）。
如果我错过了什么，对不起，请随时提问，这是我在这里的第一个问题。