Question

我在用vs代码从当前组件中渲染另一个组件时遇到麻烦。我收到的错误消息是..

类型“ {}”不可分配给类型“ IntrinsicAttributes＆ IntrinsicClassAttributes＆Readonly <{children ?: ReactNode; }>＆...”。类型“ {}”不可分配给类型 “只读>”。类型“ {}”中缺少属性“匹配”。

这是我的代码。

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服务器上的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接口，但从未使用过，我看不到任何实际的组件状态。

基于此代码示例，我只能建议您将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是什么样子。

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

1 个答案: