0

我正在使用 ReactXP（它使用 TypeScript）来编写一个聊天客户端，该客户端显示一个面板，该面板在顶部包含一堆消息，在底部包含一个用于提交新聊天消息的表单。我正在尝试将消息堆栈分解为ChatMessage类型对象的数组。这个特定的例子使用了 VirtualListView 的 ReactXP 扩展。

当我尝试编译下面的示例时，我收到以下错误：

TS2322: Type '{ messages: ChatMessage[]; }' is not assignable to type 'ChatMessage[]'.
   Property 'length' is missing in type '{ messages: ChatMessage[]; }

我可以从错误消息中看到ChatMessage[]没有被解释为数组，因为它缺少'length' 属性，这是数组所期望的。

如何ChatMessage[]正确投射，以便ChatMessageStackView调用render()没有错误？为什么messages我引用时会变成嵌套对象this.props.stack？

这是示例：

import RX = require('reactxp');
import { VirtualListView, VirtualListViewItemInfo } from 'reactxp-virtuallistview';

export interface ChatMessage extends VirtualListViewItemInfo {
    content: string,
    username: string,
    timestamp: string 
}

interface ChatMessageStackProps {
    stack: ChatMessage[];
}

export const ChatMessageStack = (messages:ChatMessage[]) =>
    (
        <VirtualListView
            itemList={messages}
            renderItem={renderMessage}
            animateChanges={ true }
            skipRenderIfItemUnchanged={ true }
        />
    )

function renderMessage(message:ChatMessage, hasFocus?: boolean) {
    return (
        <RX.View>
            <RX.Text>
                {message.timestamp} {message.username} {message.content}
            </RX.Text>
        </RX.View>
    )
}

export class ChatMessageStackView extends RX.Component<ChatMessageStackProps, RX.Stateless> {
    constructor(props:ChatMessageStackProps) {
        super(props);
    }

    render() {
        return (
            <ChatMessageStack messages={this.props.stack}/>
        );
    }
}

谢谢你的帮助。

4

1 回答 1

0

尝试将此 ChatMessage[] 设置为：ChatMessage:any[]

于 2018-11-07T13:32:04.290 回答