类型{儿童：元素； } 与 IntrinsicAttributes 类型没有共同的属性答案

【问题标题】：Type {children: Element; } has no properties in common with type IntrinsicAttributes类型{儿童：元素； } 与 IntrinsicAttributes 类型没有共同的属性
【发布时间】：2019-08-29 23:40:19
【问题描述】：

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

类型 {children: Element; } 与 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>;
};

我不知道为什么会不幸出现此错误。如果有人可以帮助我，那就太棒了！

【问题讨论】：

标签： reactjs typescript

【解决方案1】：

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

interface HeaderProps {
  children: any;
}

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

加油！

【讨论】：