Как же все-таки устроены компоненты react?

Question

[mletov]

Пожалуйста, подскажите. Разбираюсь с React, пока больше вопросов, чем ответов.

Вот решил я прикрутить грид и взял самый базовый пример

adazzle.github.io/react-data-grid/scripts/example0...

Вопросы:
1) В конструкторе идет обращение к this._columns и this.state, хотя таких свойств в классе не объявлено.
Откуда класс про них должен знать, естественно, у меня они подчеркиваются красным.
2) На входные параметры конструктора ругается " TS7006: Parameter 'props' implicitly has an 'any' type."

Код компонента, который получился у меня

import * as React from 'react';
import { RouteComponentProps } from 'react-router';
import * as ReactDOM from 'react-dom';
import * as  ReactDOMServer from 'react-dom/server'
import * as ReactDataGrid from 'react-data-grid';



class MyGrid extends React.Component<RouteComponentProps<{}>, {}> {
    constructor(props, context) {
        super(props, context);
        this.createRows();
        this._columns = [
            { key: 'id', name: 'ID' },
            { key: 'title', name: 'Title' },
            { key: 'count', name: 'Count' }];

        this.state = null;
    }

    createRows = () => {
        let rows = [];
        for (let i = 1; i < 1000; i++) {
            rows.push({
                id: i,
                title: 'Title ' + i,
                count: i * 1000
            });
        }

        this._rows = rows;
    };

    rowGetter = (i) => {
        return this._rows[i];
    };

    render() {
        return (
            <ReactDataGrid
                columns={this._columns}
                rowGetter={this.rowGetter}
                rowsCount={this._rows.length}
                minHeight={500} />);
    }
}

Comments

[Максим]

mletov
> 1) В конструкторе идет обращение к this._columns и this.state, хотя таких свойств в классе не объявлено.
так вы их в конструкторе и создаете... this ссылается на конкретно этот элемент и вы туда просто пишите новые свойства, почему бы нет?

[mletov]

Максим, Спасибо, я просто к C# привык, решил, что должно быть что-то вроде
int state;

[Максим]

mletov, ну а второе. видимо у вас там правило стоит, которое запрещает тип any (вы там указали пустой объект, не знаю почему стало any.. флоу в вашем примере не вижу, может у вас там TS или еще чего)

[mletov]

Максим,

Но при этом вот такой кусок кода

render() {
        return (
            <ReactDataGrid
                columns={this._columns}
                rowGetter={this.rowGetter}
                rowsCount={this._rows.length}
                minHeight={500} />);
    }

ругается на Property '_columns' does not exist on type 'MyGrid'.

[Максим]

mletov, надо this._columns типизировать

[Миша Малышев]

Тайпскрипт ругается, потому что не видит свойства, объявленного на уровне класса.
Чтобы этого не происходило, достаточно объявить это свойство в классе, а не в конструкторе:

class MyGrid extends React.Component<RouteComponentProps<{}>, {}> {
    _columns = [
            { key: 'id', name: 'ID' },
            { key: 'title', name: 'Title' },
            { key: 'count', name: 'Count' }
    ];

    constructor(props, context) {
        super(props, context);
        this.createRows();
        this.state = null;
    }
   .......

объявление свойств в конструкторе - старый способ. когда в js появились class properties, он стал не нужен. точно так же можно объявлять state

[mletov]

Максим, Миша Малышев, спасибо. Просто непонятно, я копировал этот код напрямую из доков
adazzle.github.io/react-data-grid/scripts/example0...

Соответственно, предполагал, что и так заработает без дополнительных манипуляций. Получается, в доках уже неправильный код?