在组件中返回 null 是否会阻止子组件呈现?

Question

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

我所有的providers、router和appcomponents都加载在我的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组件之后的组件。问题是我不知道为什么它不渲染任何其他组件。

这是我定义LoadingProvider的withLoading文件：

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组件的Loading.js文件：

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 有关。但是当我注释掉代码规则时，它说：

未

捕获的不变冲突：加载(...(：未返回任何内容 呈现。这通常意味着缺少返回语句。或者，到 不渲染任何内容，返回 null。

Answer 1

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

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

请注意，null不渲染任何内容。

Answer 2

您的<App/>将在其children属性中传递给 LoadProvider。但是 LoadProvider 不会对其子项执行任何操作，因此不会发生任何操作。

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