0

我在理解这个界面时遇到了问题

export interface StoryData<Content = StoryblokComponent<string> & { [index: string]: any }> {
  ...
  content: Content
  ...
}

这是组件类型

export interface StoryblokComponent<TComp extends string> {
  _uid: string
  component: TComp
  _editable?: string
}

这是我的动态组件：

import { StoryData } from "storyblok-js-client";
import { components } from "../config/componentRegister";
export const DynamicComponent: React.FC<StoryData> = ({
  content,
}: StoryData) => {
  if (typeof components[content.component] !== "undefined") {
    const Component = components[content.component];

    return <Component content={content} />;
  }
  // fallback if the component doesn't exist
  return (
    <p>
      The component <strong>{content.component}</strong> has not been created
      yet.
    </p>
  );
};

我的问题出现在这里：

export const Page: React.FC<StoryData> = ({
  content,
}: StoryData<StoryData>) => {
  let { grid } = content;
  return (
    <div {...sbEditable(content)}>
      {grid?.map((childContent) => (
        <DynamicComponent content={childContent} />
      ))}
    </div>
  );
};

里面content可以有更多 _uid: string component: TComp _editable?: string

例如，size女巫是一个字符串。我可以定义密钥的名称。它也可以是 StoryData 数组，grid: StoryData[]例如。

错误出现在我的Page组件的 Props 中

Type '({ content }: StoryData) => void' is not assignable to type 'FC<StoryData<StoryblokComponent<string> & { [index: string]: any; }>>'.
  Type 'void' is not assignable to type 'ReactElement<any, any>'.ts(2322)

我该如何解决这个错误？

4

0 回答 0