无法从另一个渲染另一个组件

Question

我无法在 vs 代码中从当前组件渲染另一个组件。我得到的错误信息是..

类型“{}”不可分配给类型“IntrinsicAttributes & IntrinsicClassAttributes & Readonly & ...'。类型“{}”不可分配给类型 '只读>'。 类型“{}”中缺少属性“匹配”。

这是我的代码..

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，它实际上是在我的网络服务器上渲染来自 web 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 接口，我没有看到任何实际的组件状态。

基于此代码示例，我只能建议您将 Bi​​llComponentState 重命名为 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 长什么样。