Блог

Я новичок в react. Только вчера начал изучать. Я хочу реализовать сетку данных в приложении react, поэтому решил использовать пользовательский ReactDataGrid компонент. Я устанавливаю компонентную сеть с помощью команды npm install react-data-grid --save . Вот как я реализовал код на своей странице.

 import { Component } from 'react';
import ReactDataGrid from 'react-data-grid';

class Employee extends Component {
    constructor(pros) {
        super(pros);
        this.state = {
            columns: [
                { key: 'id', name: 'ID' },
                { key: 'title', name: 'Title' },
                { key: 'count', name: 'Count' }
            ],
            rows: [
                { id: 0, title: 'row1', count: 20 },
                { id: 1, title: 'row1', count: 40 },
                { id: 2, title: 'row1', count: 60 }
            ]
        }
    }

    render() {
        return (
            <div className="row">
                <div className="col-md-12 col-sm-12 col-lg-12 card card-user">
                    <div className="row card-header">
                        <div className="col-md-8">
                            <h5 className="card-title">Employee List</h5>
                        </div>
                        <div className="col-md-4 text-right">
                            <button className="btn btn-primary btn-round"><i className="nc-icon nc-simple-add"></i> amp;nbsp; Add</button>
                            <button className="btn btn-danger btn-round"><i className="nc-icon nc-simple-remove"></i> amp;nbsp;Cancel</button>
                        </div>
                    </div>
                    <div className="card-body">
                        <ReactDataGrid
                            columns={this.state.columns}
                            rowGetter={i => this.state.rows[i]}
                            rowsCount={3}
                            minHeight={150}
                        />
                    </div>
                </div>
            </div>
        );
    }
}

export default Employee;
  

Но, к сожалению, у меня возникла некоторая проблема. И состояние ошибки, как показано на рисунке ниже.

Как мне избавиться от этой проблемы?????

Ваша реализация верна. Сбой приложения из-за последней версии. Попробуйте с ReactDataGrid v6.1.0 помощью .

Я создал образец codesandbox. Вы можете проверить поведение там. Попробуйте изменить версию react-grid и посмотрите результат. (выделено красным на скриншоте)

Рабочий код — https://codesandbox.io/s/sleepy-thunder-yee6j?file=/src/App.js