获取流通道 EmptyStateIndicator 打字稿错误
getstream channel EmptyStateIndicator typescript error
我在这上面卡了一段时间我只是不知道它需要什么类型
import React, { Fragment } from "react";
import { Channel, useChatContext } from "stream-chat-react";
import {
ChannelInner,
CreateChannel,
EditChannel,
TeamMessage,
} from "../index";
interface Props {
isCreating: boolean;
creatType: string;
isEditing: boolean;
setIsEditing: (value: boolean | ((prevVar: boolean) => boolean)) => void;
setIsCreating: (value: boolean | ((prevVar: boolean) => boolean)) => void;
}
const ChannelContainer = ({
isCreating,
creatType,
setIsEditing,
setIsCreating,
isEditing,
}: Props) => {
const { channel } = useChatContext();
if (isCreating) {
return (
<div className="channel__container">
<CreateChannel creatType={creatType} setIsCreating={setIsCreating} />
</div>
);
}
if (isEditing) {
return (
<div className="channel__container">
<EditChannel isEditing={isEditing} />
</div>
);
}
const EmptyState = () => {
<div className="channel-empty_container">
<p className="channel-empty__first">
This is the begining of the chat history.
</p>
<p className="channel-empty__second">
Send messages, emojis ,attachments ,links ,and more!
</p>
</div>;
};
return (
<div className="channel__container">
<Channel
//>>>>>>>>>> this is the problem( EmptyStateIndicator={EmptyState})
Message={(messageProps, i) => <TeamMessage key={i} {...messageProps} />}
>
<ChannelInner setIsEditing={setIsEditing} />
</Channel>
</div>
);
};
export default ChannelContainer;
EmptyStateIndicator 总是抛出如下错误:
(属性) EmptyStateIndicator?: React.ComponentType |不明确的
当 MessageList 为空时要显示的自定义 UI 组件,默认为并接受与以下相同的道具:EmptyStateIndicator
Type '() => void' is not assignable to type 'ComponentType<EmptyStateIndicatorProps> | undefined'.
Type '() => void' is not assignable to type 'FunctionComponent<EmptyStateIndicatorProps>'.
Type 'void' is not assignable to type 'ReactElement<any, any> | null'.ts(2322)
Channel.d.ts(54, 5): The expected type comes from property 'EmptyStateIndicator' which is declared here on type 'IntrinsicAttributes & ChannelProps<DefaultStreamChatGenerics, CustomTrigger> & { children?: ReactNode; }'
我没有在网上找到任何东西,但我在 Channel.d.ts 文件中找到了这个
Custom UI component to be displayed when the `MessageList` is empty, , defaults to and accepts same props as: [EmptyStateIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/EmptyStateIndicator/EmptyStateIndicator.tsx)
EmptyStateIndicator?: ComponentContextValue<StreamChatGenerics>['EmptyStateIndicator'];
您的 EmptyState 没有返回任何值。改成
const EmptyState = () => {
return (
<div className="channel-empty_container">
<p className="channel-empty__first">
This is the begining of the chat history.
</p>
<p className="channel-empty__second">
Send messages, emojis ,attachments ,links ,and more!
</p>
</div>
);
};
我在这上面卡了一段时间我只是不知道它需要什么类型
import React, { Fragment } from "react";
import { Channel, useChatContext } from "stream-chat-react";
import {
ChannelInner,
CreateChannel,
EditChannel,
TeamMessage,
} from "../index";
interface Props {
isCreating: boolean;
creatType: string;
isEditing: boolean;
setIsEditing: (value: boolean | ((prevVar: boolean) => boolean)) => void;
setIsCreating: (value: boolean | ((prevVar: boolean) => boolean)) => void;
}
const ChannelContainer = ({
isCreating,
creatType,
setIsEditing,
setIsCreating,
isEditing,
}: Props) => {
const { channel } = useChatContext();
if (isCreating) {
return (
<div className="channel__container">
<CreateChannel creatType={creatType} setIsCreating={setIsCreating} />
</div>
);
}
if (isEditing) {
return (
<div className="channel__container">
<EditChannel isEditing={isEditing} />
</div>
);
}
const EmptyState = () => {
<div className="channel-empty_container">
<p className="channel-empty__first">
This is the begining of the chat history.
</p>
<p className="channel-empty__second">
Send messages, emojis ,attachments ,links ,and more!
</p>
</div>;
};
return (
<div className="channel__container">
<Channel
//>>>>>>>>>> this is the problem( EmptyStateIndicator={EmptyState})
Message={(messageProps, i) => <TeamMessage key={i} {...messageProps} />}
>
<ChannelInner setIsEditing={setIsEditing} />
</Channel>
</div>
);
};
export default ChannelContainer;
EmptyStateIndicator 总是抛出如下错误:
(属性) EmptyStateIndicator?: React.ComponentType |不明确的 当 MessageList 为空时要显示的自定义 UI 组件,默认为并接受与以下相同的道具:EmptyStateIndicator
Type '() => void' is not assignable to type 'ComponentType<EmptyStateIndicatorProps> | undefined'.
Type '() => void' is not assignable to type 'FunctionComponent<EmptyStateIndicatorProps>'.
Type 'void' is not assignable to type 'ReactElement<any, any> | null'.ts(2322)
Channel.d.ts(54, 5): The expected type comes from property 'EmptyStateIndicator' which is declared here on type 'IntrinsicAttributes & ChannelProps<DefaultStreamChatGenerics, CustomTrigger> & { children?: ReactNode; }'
我没有在网上找到任何东西,但我在 Channel.d.ts 文件中找到了这个
Custom UI component to be displayed when the `MessageList` is empty, , defaults to and accepts same props as: [EmptyStateIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/EmptyStateIndicator/EmptyStateIndicator.tsx)
EmptyStateIndicator?: ComponentContextValue<StreamChatGenerics>['EmptyStateIndicator'];
您的 EmptyState 没有返回任何值。改成
const EmptyState = () => {
return (
<div className="channel-empty_container">
<p className="channel-empty__first">
This is the begining of the chat history.
</p>
<p className="channel-empty__second">
Send messages, emojis ,attachments ,links ,and more!
</p>
</div>
);
};