'AfterInteractions' 不能用作 JSX 组件

Question

我该如何解决这个错误？

'AfterInteractions' cannot be used as a JSX component.
  Its return type 'ReactNode' is not a valid JSX element.
    Type 'undefined' is not assignable to type 'Element | null'

交互管理器：

import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, View, InteractionManager } from 'react-native';
import { IAfterInteractions } from './Model';

const AfterInteractions = ({ children, placeholder }: IAfterInteractions) => {
  const [ready, setReady] = useState(false);

  useEffect(() => {
    const Inter = InteractionManager.runAfterInteractions(() => {
      setReady(true);
    });

    return () => Inter.cancel();
  }, []);
  
  if(ready) {
    return children;
  }

  if(placeholder) {
    return placeholder;
  }

  return null;
};

export default AfterInteractions;

SomeFile.tsx

      <AfterInteractions>
        <SomeComponent />
      </AfterInteractions>

所以错误来自

中的组件 someFile.tsx

如何解决这个错误？

Answer 1

您要返回没有父项的子项，您需要将它们包装在 ReactFragment 中。

if (ready) {
  return <>{children}</>;
}