Невозможно отобразить другой компонент из другого

Question

У меня проблемы с отображением другого компонента из текущего компонента в коде. Я получаю сообщение об ошибке ..

Тип '{}' нельзя назначить типу 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly <{children ?: ReactNode; }> & ... '. Тип '{}' нельзя назначить типу 'Readonly>'. Свойство «match» отсутствует в типе «{}».

Вот мой код ..

import * as React from 'react';
import { BillList } from './BillList';
import * as ReactDOM from "react-dom";

export interface BillComponentState {
    children?: React.ReactNode,
    bills: BillList
}

export class BillComponent extends React.Component<BillList>{
    public render() {
        return <div className='container-fluid'>
            <div className='row'>
                <div className='col-sm-3'>
                    <BillList />
                </div>
                <div className='col-sm-9'>
                    {this.props.children}
                </div>
            </div>
        </div>;
    }
}

Почему я не могу просто отобразить свой BillList, который буквально отображает список строк из веб-API на моем веб-сервере?

Отказ от ответственности: я очень новичок в React

РЕДАКТИРОВАТЬ: Вот код в BillList.tsx

import * as React from 'react';
import { RouteComponentProps } from 'react-router';

interface BillState {
    bills: Bill[],
    loading: boolean
}

export class BillList extends React.Component<RouteComponentProps<{}>, BillState>
{
    constructor() {
        super();

        this.state = { bills: [], loading: true };

        fetch("api/SampleData/GetBills")
            .then(response => response.json() as Promise<Bill[]>)
            .then(data => {
                this.setState({
                    bills: data,
                    loading: false
                });
            });
    }

    public render() {

        let contents = this.state.loading
            ? <p><em>Loading...</em></p>
            : BillList.renderBillsToList(this.state.bills);

        return <div className="rendered-bills">
            <h1>Bills to pay</h1>
            {contents}
        </div>
    }

    public static renderBillsToList(bills: Bill[]) {

        return <ul>
            {bills.map((bill, i) =>
                <li key={i}> {bill.name} </li>
            )}
        </ul>;
    }
}

interface Bill {
    name: string;
}

Вот код в публичном репо. Дайте мне знать, если вам понадобится дополнительная отладочная информация от меня.

https://github.com/ddeamaral/billTracker

Answer 1

Этот пример кода не предоставляет достаточно информации, чтобы сказать, откуда возникла ошибка. Однако первый параметр React.Component принимает свойства компонентов, и вы, похоже, передаете компонент (BillList). Также есть интерфейс BillComponentState, определенный, но никогда не используемый, и я не вижу фактического состояния компонента.

На основе этого примера кода я могу только посоветовать вам переименовать BillComponentState в BillComponentProps и передать его компоненту вместо BillList.

import * as React from 'react';
import { BillList } from './BillList';
import * as ReactDOM from "react-dom";

export interface BillComponentProps {
    children?: React.ReactNode,
    bills: BillList
}

export class BillComponent extends React.Component<BillComponentProps>{
    public render() {
        return <div className='container-fluid'>
            <div className='row'>
                <div className='col-sm-3'>
                    <BillList />
                </div>
                <div className='col-sm-9'>
                    {this.props.children}
                </div>
            </div>
        </div>;
    }
}

Но это только догадки, поскольку мы не знаем, как выглядит BillList.