Question

大家好，我现在无法在组件中嵌套组件时在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>

我的标头是这样的无状态组件：

interface HeaderProps {
  children: any;
}

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

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

Answer 1

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

interface HeaderProps {
  children: any;
}

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

加油！

Answer 2

尝试将Header输入为/data/mydata/ --test1 --f2.txt --foo --metadata --test1.json --test2 --metadata --foo(under metadata) --test2.json --f2.txt，您甚至不需要将子级声明为显式道具。如果这不起作用，请尝试更新您的react / react-dom软件包和关联的React.FunctionComponent

Answer 3

您需要exports.checkDewBubble = functions.https.onCall( (data) => { //some code including async functions const ref = db.collection("users").doc(userID).collection("results").doc("dpbp") return ref.update({ bubblePoint: parseFloat(bubblePoint), dewPoint: parseFloat(dewPoint) }) .then(() => { return { dew: (dewPoint - 273.15).toFixed(2), bubble: (bubblePoint - 273.15).toFixed(2) } }) .catch((err) => { throw new functions.https.HttpsError('failed to connect' + err.message) }) })，并且不需要HeaderProps

React.SFC

如果这给您带来麻烦，请使用HeaderProps作为

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

类型{children：Element; }没有与IntrinsicAttributes类型相同的属性

3 个答案: