gpt4 book ai didi

reactjs - 对 child 使用 “React.ReactNode”类型时出错。我应该使用哪种类型?

转载 作者:行者123 更新时间:2023-12-02 10:45:48 25 4
gpt4 key购买 nike

使用LoaderIndicator()函数呈现子项时收到错误消息,当loading = false时,请参见下面的代码。当我使用React.ReactNode而不是any类型时出现错误,但通常我将React.ReactNode用作子类型。这是我得到的错误:'LoaderIndicator' cannot be used as a JSX component. Its return type '{}' is not a valid JSX element. Type '{}' is missing the following properties from type 'Element': type, props, key. ts(2786)我不知道如何解决此错误,我已经尝试了几乎所有方法,有人可以提供帮助吗? :)

export type LoaderIndicatorProps = {
loading: boolean;
children?: React.ReactNode;
};
export function LoaderIndicator(props: LoaderIndicatorProps) {
const { loading, children } = props;

if (loading) {
return (
<div>
<Container>
<Icon />
<h3 style={{ color: "#ffffff" }}>Wait for a moment...</h3>
</Container>
</div>
);
} else {
return children;
}
}

最佳答案

React组件应返回JSX.Element。如您所见,您的 child 属于React.ReactNode类型,因此直接返回他们将无法工作。您需要将它们包装在一个元素或React.Fragment中:

type TestComponentProps = {
children?: React.ReactNode;
}

function TestComponent(props: TestComponentProps) {
return <React.Fragment>{props.children}</React.Fragment>;
}

关于reactjs - 对 child 使用 “React.ReactNode”类型时出错。我应该使用哪种类型?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63898651/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com