reactjs - 如何键入带有非可选“children”的 React.FC？

Question

在编写 TypeScript (tsx) 时，我通常使用React.FC<Props>(Or React.FunctionComponent<Props>) 键入我的 React 组件，其中Props是我自己的 prop 类型的接口。然后，打字系统将添加children?到我的组件采用的道具列表中。

但这使得children道具是可选的。

所以我们有React.VFC没有子React.FC组件的组件和具有可选子组件的组件。但是对于具有强制子级的组件，我可以使用什么？

我可以像这样手动完成，但我希望有一种更清洁的方法。

interface ParentFunctionComponent<P = {}> {
  (props: PropsWithMandatoryChildren<P>, context?: any): ReactElement<any, any> | null;
  propTypes?: WeakValidationMap<P>;
  contextTypes?: ValidationMap<any>;
  defaultProps?: Partial<P>;
  displayName?: string;
}

type PropsWithMandatoryChildren<P> = P & { children: ReactNode };

标签： reactjstypescript

Answer 1

children为道具添加非可选。

import React from 'react';

export interface Props {
  children: React.ReactNode;
}

const Foo: React.FC<Props> = (props) => {
  return <>{props.children}</>;
};

function Bar() {
  return (
    <>
      {/*
        <Foo />     error
        <Foo></Foo> error
      */}

      <Foo>hello</Foo>

      <Foo>
        <div>foo bar</div>
      </Foo>
    </>
  );
}