反应组件返回 null 值是一种好习惯吗？

Question

我在屏幕底部有一个门户，仅供参考。它显示在 redux 状态，并且该组件处于 App 级别。如果此门户组件更改其状态，则问题在于重新呈现整个父组件。就我而言，如果有人关闭门户。以下是我如何通过单击关闭门户。

        dispatch({
            type: 'close-portal',
            payload: {
                portalState: { display: false },
            },
        });

应用组件

const isPortalOpen = useSelector((state) => state.user.portalState.display);
<Switch>
    <Route path='/login' component={LoginPage} exact />
    <Route path='/error' component={PermissionErrorPage} exact />
</Switch>
{isPortalOpen && <InformativeMessage />}

现在，如果我在 Login 页面上并关闭门户，整个页面将重新呈现。

备选方案

我从 App 组件中删除了条件渲染，并将其移至 portal 组件本身。

应用组件

<Switch>
    <Route path='/login' component={LoginPage} exact />
    <Route path='/error' component={PermissionErrorPage} exact />
</Switch>
<InformativeMessage />

门户组件

    return (
        <>
            {isPortalOpen ? (
                <EuiPortal>
                    <EuiBottomBar style={{ backgroundColor: showUnsavedWarningPortal ? 'red' : '', padding: '20px' }}>
                        <EuiFlexItem style={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}>
                            <EuiFlexItem>
                                <EuiButtonIcon
                                    onClick={closePortal}
                                    color='ghost'
                                    iconType='crossInACircleFilled'
                                />
                            </EuiFlexItem>
                            <EuiFlexItem style={{ marginLeft: '10px' }}>
                                <EuiText>{message}</EuiText>
                            </EuiFlexItem>
                        </EuiFlexItem>
                    </EuiBottomBar>
                </EuiPortal>
            ) : null}
        </>
    ); 

但

现在这将 return null如果门户已关闭但此组件未完全删除。如果我打开开发工具并转到“组件”选项卡，我可以看到门户组件。当然，里面什么也没有，但是让这个组件贯穿整个应用程序是一个好习惯吗 运行?

Answer 1

我会说这没什么问题，而且我已经看到很多人使用这种技术。最好，我更喜欢第一种方法——它将逻辑放在 App 组件中，而 InfoMessage 只需要关心它的表示——这是一种很好的分离关注点的方法

Answer 2

返回没有问题null； react official 也推荐它。 在反应中它也被指定为有效的节点类型；如你所见，React 的 @types/react/index.d.ts 类型定义文件：

type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;