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

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;

我的其他提供程序不会阻止任何其他组件的渲染。但是，当我在 root.js 中添加 LoadingProvider 并使用 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 有关。但是当我评论该代码规则时，它说:

Uncaught Invariant Violation: Loading(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, 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 .