javascript - 在组件中返回 null 是否会阻止子组件呈现？

问题描述

我有一个LoadingProvider我将Loading组件的状态设置为 false 并在需要时设置为 true 的地方。我只想在Loading加载状态等于 true 时显示我的组件。

我所有的providers,router并app components加载到我的root.js:

import React, { Component } from "react";
import { BrowserRouter as Router } from "react-router-dom";
import { MuiPickersUtilsProvider } from "material-ui-pickers";
import MomentUtils from "@date-io/moment";

import App from "./App";
import { DeleteDialogProvider } from "/hocs/withDeleteDialog";
import { WarningDialogProvider } from "/hocs/withWarningDialog";
import { LoadingProvider } from "/hocs/withLoading";

import { MuiThemeProvider, createMuiTheme } from "@material-ui/core/styles";
import { StateProvider } from "/hocs/withState";
import { I18nProvider } from "/hocs/withI18n";

const theme = createMuiTheme({});

class Root extends Component {
  render() {
    return (
      <MuiThemeProvider theme={theme}>
        <MuiPickersUtilsProvider utils={MomentUtils}>
          <I18nProvider>
            <DeleteDialogProvider>
              <WarningDialogProvider>
                <StateProvider>
                  <Router>
                    <LoadingProvider>
                      <App />
                    </LoadingProvider>
                  </Router>
                </StateProvider>
              </WarningDialogProvider>
            </DeleteDialogProvider>
          </I18nProvider>
        </MuiPickersUtilsProvider>
      </MuiThemeProvider>
    );
  }
}

export default Root;

我的其他提供程序不会阻止任何其他组件呈现。但是当我添加LoadingProvider并root.js检查控制台时，React Developer Tools我发现它没有加载/渲染我的组件之后的LoadingProvider组件。问题是我不知道为什么它不渲染任何其他组件。

这是我withLoading定义的文件LoadingProvider：

import React, { Component } from "react";
import Loading from "/components/Loading";

const LoadingContext = React.createContext();

export class LoadingProvider extends Component {
    constructor(props) {
        super(props);

        this.state = {
            loading: false
        };
    }

    setLoadingContext = e => {
        this.setState({
            loading: true
        });
    };

    render() {

        return (
            <LoadingContext.Provider value={this.setLoadingContext}>
                <Loading
                    loading={this.state.loading}
                />
            </LoadingContext.Provider>
        );
    }
}

export const withLoading = Component => props => (
    <LoadingContext.Consumer>
        {setLoadingContext => (
            <Component {...props} setLoadingContext={setLoadingContext} />
        )}
    </LoadingContext.Consumer>
)

这是我Loading.js定义Loading组件的文件：

import React, { Component } from 'react';
import CircularProgress from '@material-ui/core/CircularProgress';

class Loading extends Component {
    render() {

        const loading = this.props;

        // TODO: fix weird repetitive loading prop
        if (!loading.loading) {
            return null;
        } else {
            return (
                <CircularProgress />
            );
        }
    }
}

export default Loading;

我想这与加载为假时返回 null 有关。但是当我评论这条代码规则时，它说：

未捕获的不变违规：加载（...）：渲染没有返回任何内容。这通常意味着缺少 return 语句。或者，不渲染任何内容，返回 null。

标签： javascriptreactjs

javascript - 在组件中返回 null 是否会阻止子组件呈现？

问题描述

解决方案

推荐阅读