reactjs - 输入 { child : Element; } has no properties in common with type IntrinsicAttributes

Question

我在无法将组件嵌套在组件中的 react 中收到错误。我在 Header 组件和 Search 组件中都遇到了错误。对于 Header 组件，我收到上面的错误:

Type {children: Element; } has no properties in common with type IntrinsicAttributes

我正在尝试将组件嵌套在组件中，如下所示:

<Header>
        <Grid>
          <Cell span={3} />
          <Cell span={6}>
            <Search handleUpdateQueryParam={this.handleUpdateQueryParam} />
          </Cell>
          <Cell span={3}>
            <Avatar image="https://pbs.twimg.com/profile_images/624249118114881536/qxn_I_oR_400x400.jpg" />
          </Cell>
        </Grid>
</Header>

我的 Header 是一个无状态组件，如下所示:

interface HeaderProps {
  children: any;
}

export const Header: React.FC<HeaderProps> = ({ children }) => {
  return <div className="mll-header">{children}</div>;
};

我不知道为什么不幸出现这个错误。如果有人可以帮助我，那真是太棒了!

Answer 1

让我们用“PropsWithChildren”类型包装你的 HeaderProps 接口(interface)(从 React 导入)。

interface HeaderProps {
  children: any;
}

export const Header: React.FC<PropsWithChildren<HeaderProps>> = ({ children }) => {
  return <div className="mll-header">{children}</div>;
};

欢呼!