NOTISTACK项目未渲染到提供的domroot容器中

Question

我的目标是在Div-Container中显示Notisstack Snackbar项目，该项目可通过ScreenReaders可读。因此，我想使用 domroot SnackBarProvider的属性。

我正在使用notistack 3.0.7

我的问题现在是我的问题Div-container元素是渲染的，但不用作我的SnackBaritem的根。我只定义了一个SnackbarProvider。

index.tsx

const SnackbarProviderWrapper = () => {

    const alertContainer = React.createElement('div', {
        "aria-live": "assertive",
        className: "alert-container"
    }) as unknown as HTMLElement

    return (
        <SnackbarProvider anchorOrigin={{vertical: "bottom", horizontal: "center"}}
                          domRoot={alertContainer}
                      >
            <App/>
            {alertContainer}
        </SnackbarProvider>
    )
}


ReactDOM.render(
    <React.StrictMode>
                <SnackbarProviderWrapper/>
    </React.StrictMode>,
    document.getElementById('root')
);

Answer 1

好的，我找到了解决方案。这也不是例外的“脏”，但也不干净。

首先，我将snackbarprovider移至组件中，在我的情况下，应用程序组件可以访问挂钩。
比我为容器使用一个组件，而不是react.Createlement（...）。该组件通过forwardRef将其分配元素转发。最后，我们通过usestate（）钩子管理元素。

/**
 * This is the Element that will be used as a container for all notistack snackbar items
 */
const AlertContainer = React.forwardRef<HTMLDivElement>((props, ref) => (
    <div ref={ref} className="alert-container" aria-live={"assertive"}>
        {props.children}
    </div>
));

function App() {
    const [alertContainer, setAlertContainer] = useState<HTMLDivElement | null>(null)

    return (
        <>
            <AlertContainer ref={setAlertContainer}/>
            {alertContainer ?
                <SnackbarProvider anchorOrigin={{vertical: "bottom", horizontal: "center"}}
                                  domRoot={alertContainer}>
                    <main/>
                </SnackbarProvider>
                : null /* we must have this conditon to render the DOM once so our AlertContainer is present*/}
        </>
    );
}

您可能会问为什么不使用useref（）挂钩？那是因为在使用容器组件之前，树必须至少渲染一次。
因此，我们还添加了第一个渲染中返回null的条件。如果我们没有这个，我们的AlertContainer组件尚不存在，DOMRoot将是null。

奇怪的是，Notistack期望属性domroot的已经初始化的HTMLELLENT。这禁止我们在此处使用常规参考。
这尤其奇怪，因为无需使用现有的DOM元素。当必须显示警报/snackbaritem时，必须存在该元素，而不是以前。