使用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>; 
} 


评论关闭
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!