Я совершенно новичок в ReactJS и в кодировании вообще, и я пытаюсь визуализировать сетку реагирующих данных с помощью "response-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 были просто для тестирования, и теперь я использую его длясоздать стартовую таблицу при загрузке страницы (которая работает и для столбцов, но не для изменений впоследствии, в отличие от строк, которые работают всегда).
Если я что-то пропустил, извините, не стесняйтесь спрашивать, это мой первыйвопрос здесь.