获取流通道 EmptyStateIndicator 打字稿错误

Question

我在这上面卡了一段时间我只是不知道它需要什么类型

    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'];

Answer 1

您的 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>
    );
  };

获取流通道 EmptyStateIndicator 打字稿错误

getstream channel EmptyStateIndicator typescript error

reactjs

typescript

react-props

getstream-io