Question

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

我的所有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;

我想这与加载为false时返回null有关。但是当我注释掉该代码规则时，它说：

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

Answer 1

这主要是因为您在LoadingProvider中没有使用props.children 。

<LoadingContext.Provider value={this.setLoadingContext}>
  <Loading
    loading={this.state.loading}
  />
  {this.props.children} // add this
</LoadingContext.Provider>

请注意，null don't render anything。

Answer 2

您的<App/>在其children属性中传递给LoadingProvider。但是LoadingProvider对其子对象不做任何事情，因此什么也没发生。

因此，当您希望它们渲染时，返回this.props.children。

在组件中返回null是否会阻止子组件的渲染？

2 个答案: