对于ReactJS和编码我还是很陌生，我正在尝试使用“ react-data-grid”渲染一个React数据网格。现在，该网格由两个数组组成，一个行数组和一个列数组。现在，我已经创建了用于推送和弹出数组以添加或删除列和行的函数。
问题是，它实际上以行而不是列的形式呈现更改。我问了我一个比较有经验的同事，但是他帮不了我。但是，我们记录了控制台，“幕后”的一切工作正常，只是无法渲染：
我已将代码分为表部分和呈现部分：
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外部的方法仅是测试方法，现在我使用它在页面加载时创建一个起始表（也适用于列，但不适用于以后的更改，与始终有效的行相反）。
如果我错过了什么，对不起，随时问，这是我在这里的第一个问题。