使用类型 "React.ReactNode" 到 children 时出错。我应该使用哪种类型？

Question

使用函数 LoaderIndicator() 时获取错误消息，当 loading = false 时呈现 children，请参阅下面的代码。当我使用 React.ReactNode 而不是类型 any 时出现错误，但通常我使用 React.ReactNode 作为 children 的类型。这是我得到的错误：

'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;
  }
}

Answer 1

React 组件应该 return JSX.Element。如您所见，您的 children 属于 React.ReactNode 类型，因此直接 return 将无法正常工作。您需要将它们包装在一个元素或 React.Fragment:

中

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

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

使用类型 "React.ReactNode" 到 children 时出错。我应该使用哪种类型？

Getting error when using type "React.ReactNode" to children. Which type should I use?

children

compiler-errors

typescript

reactjs