如何在react typescript中输入功能组件prop

s6fujrry 于 2022-12-30 发布在 TypeScript

关注(0)|答案(2)|浏览(217)

我有一个react组件它接受react函数组件作为 prop 。
我的代码：

interface ComponentBProps {
  someComponent?: React.ComponentType;
  msg: string;
}

function ComponentB({someComponent: SomeComponent, msg}: ComponentBProps ) {
  return (
    <div>
      {
        SomeComponent && <SomeComponent>
          <div>
            {msg}
          </div>
        </SomeComponent>
      }
    </div>
  );
}

function ComponentA() {
  return (
    <ComponentB
      someComponent={({children}) => <div>{children}</div>}
      msg="msg"
    />
  );
}

它给了我错误

Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes'.
<SomeComponent>
  <div>

以及

Property 'children' does not exist on type '{}'.
<ComponentB
  someComponent={({children}) => <div>{children}</div>}
  msg="msg"
/>

我应该分配给什么类型

someComponent?: React.ComponentType;

React版本：第一个月

typescript

来源：https://stackoverflow.com/questions/74951545/how-to-type-a-prop-which-is-a-function-component-in-react-typescript

2条答案

按热度按时间

gfttwv5a1#

如果要强制执行特定的React组件，可以执行以下操作。

const ComponentA: React.FC<{ name: string }> = ({ name }) => <div>hello {name}</div>;

interface PropsB {
  component: typeof ComponentA;
}

const ComponentB: React.FC<PropsB> = ({ component: Component }) => (
  <div>
    <Component name='John' />
  </div>
);

<ComponentB component={ComponentA} />;

赞(0）回复(0）举报 2022-12-30

50pmv0ei2#

我喜欢使用从React导入的FunctionComponent

type Props = {
   component: FunctionComponent<OtherProps>
}

export function SomeComponent({ component: Component }: Props) {
  return <Component />
}

赞(0）回复(0）举报 2022-12-30

我来回答

如何在react typescript中输入功能组件prop

2条答案

相关问题

热门标签

最新问答