Question

我正在使用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}/>
        );
    }
}

感谢您的帮助。

Answer 1

尝试将此ChatMessage []设置为： ChatMessage：任何[]

ReactXP：接口数组

1 个答案: