Question

我通常使用以下模式定义功能性反应组件：

interface Props {
    title: string; //for example
}

export const MyComponent : React.FunctionComponent<Props> = (props) => {
    const {
        title, 
        children //This is implied as allowed by the FunctionalCompoment interface I believe

    } = props; 

     return <div>{title}{children}</div> 
}

我有一个必须的组件，就像很多react组件一样。

我该如何执行？

在相关说明中，是否可以强制要求子代必须具有某种类型的React组件？

Answer 1

这是一种内置方式，但是子类型是可选的。

export const MyComponent : React.FunctionComponent<React.PropsWithChildren<Props>> = (props) => {
  const {
    title,
    children //This is implied as allowed by the FunctionalCompoment interface I believe

  } = props;

  return <div>{title}{children}</div>
}

我建议您创建自己的类型或接口

type MustHaveChildren<T> = T & { children: ReactNode }

或

interface MustHaveChildren {
 children: ReactNode
}

interface T extends MustHaveChildren {
 .... // your types
}

用法：

类型

export const MyComponent : React.FunctionComponent<MustHaveChildren<Props>> = 
  (props) => (...)

接口

export const MyComponent : React.FunctionComponent<Props> = 
  (props) => (...)

Answer 2

创建用于扩展其他接口的基本接口？

interface MustHaveChildren {
  children;
}

interface Props extends MustHaveChildren {
  title: string;
}

需要子代的功能组件的Typescript接口

2 个答案: