将 props 传递给组件包装器

Question

我有一个在两个子组件之间切换的高阶组件（呈现数据和加载组件的组件）： ，问题是如何将数据组件中发生的加载状态传递给临时组件，以便进行条件渲染

Wrapper：

function withLoading<Props>(DataComponent: React.FC<Props>, LoadingComponent: React.FC<Partial<Props>>) {
  const newComponent: React.FC<Props & { isLoading: boolean }> = (props) => {
    const {
      isLoading,
    } = props;
    if (isLoading) {
      return (
        <LoadingComponent
          {...props}
        />
      );
    }
    return (
      <DataComponent
        {...props}
      />
    );
  };
  return newComponent;
}

数据和加载组件：

const DataComponent: React.FC<Props> = (props: Props) => {

  const fetchData = async (): Promise<void> => {
    //Loading Logic happens in this mobx store
    await getDataFromBackend();
  };

  useEffect(() => {
    getBranchName();
  }, []);

return (
  //UI
)

const LoadingComponent = () => {
  const {
    selectStyle,
  } = useStyles(styles);
  return (
    <SkeletonPlaceholderWrapper>
      <View style={styles.loader} />
    </SkeletonPlaceholderWrapper>
  );
};

export default observer(
    withLoading(observer(DataComponent), LoadingComponent) //here the hoc wrapping the two children
  ),

Answer 1

在包装器中更改以下内容：

const [loading, setLoading] = useState(isLoading)

将 if(isLoading) 更改为 if(loading)

将函数 setLoading 作为 props 传递给 DataComponent

<DataComponent onComplete = {() => setLoading(false)} />

在 DataComponent 中，更新您的 fetchData< /代码> 方法：

const fetchData = async (): Promise<void> => {
    //Loading Logic happens in this mobx store
    await getDataFromBackend();
    props.onComplete() //<--- add this line
};