问题

我创建了一个自定义的警告框如下所示，但当我添加 Snackbar 时，它不显示。这是我更改的部分，其余部分相同：

***AlertPopup:***

```jsx
const AlertPopup = () => {
  const { text, type } = useAlert();

  if (text && type) {
    return (

      // 当我使用这个时，消息会显示
      // <Alert variant="filled" severity={type} sx={{}}>
      //   {text}
      // </Alert>

      // 当我使用这个时，消息不会显示
      <Stack spacing={2} sx={{ width: '100%' }}>
      <Snackbar autoHideDuration={6000}>
      <Alert variant="filled" severity={type} >
        {text}
      </Alert>
      </Snackbar>
      </Stack>

    );
  } else {
    return <></>;
  }
};

这是实现的其他部分。我没有更改其他部分（AlertContext 和 useAlert 类），因为没有特定的 Alert 组件：

那么，这个实现缺少什么？

<details>
<summary>英文:</summary>

I created a custom Alert as shown below, but when I add Snackbar, it is not displaying. Here is the part that I changed, the rest is the same:


***AlertPopup:***

const AlertPopup = () => {
const { text, type } = useAlert();

if (text && type) {
return (

  // when I use this, the message is displayed
  // <Alert variant="filled" severity={type} sx={{}}>
  //   {text}
  // </Alert>

  // when I use this, the message is NOT displayed
  <Stack spacing={2} sx={{ width: '100%' }}>
  <Snackbar autoHideDuration={6000}>
  <Alert variant="filled" severity={type} >
    {text}
  </Alert>
  </Snackbar>
  </Stack>

);

} else {
return <></>;
}
};

Here is the other parts of the implementation. I did not changed other parts (`AlertContext` and `useAlert` classes) as there is not specific component for Alert:



So, what is missing with this implementation? 




</details>


# 答案1
**得分**: 1

尽量将其包装成一个单独的JSX元素。

<details>
<summary>英文:</summary>

It may be silly but try to wrap it into a single JSX element

</details>



# 答案2
**得分**: 1

[Material UI Snackbar](https://mui.com/material-ui/api/snackbar/) 的可见性由 **open** 属性控制。通常情况下，您组件状态的某种改变会触发 Snackbar 的显示。请参考[文档中的基本示例](https://mui.com/material-ui/react-snackbar/#simple-snackbars)。

您的代码可以更新如下：

```javascript
const AlertPopup = () => {
    const [open, setOpen] = React.useState(false);
    const { text, type } = useAlert();

    React.useEffect(() => {
        // 测试触发 Snackbar 显示的某些条件。
        if (<Snackbar 应该显示的条件>) {
            setOpen(true);
        }

        // 依赖数组：请参考 https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects
    }, [<依赖数组：包括触发条件中使用的值>] );

    if (text && type) {
        return (
            // 当我使用这个时，消息会显示
            // <Alert variant="filled" severity={type} sx={{}}>
            //     {text}
            // </Alert>

            // 当我使用这个时，消息不会显示
            <Stack spacing={2} sx={{ width: '100%' }}>
                <Snackbar open={open} autoHideDuration={6000}>
                    <Alert variant="filled" severity={type}>
                        {text}
                    </Alert>
                </Snackbar>
            </Stack>
        );
    } else {
        return <></>;
    }
};

(Note: I have retained the code part in its original language as you requested.)

const AlertPopup = () => {
    const [ open, setOpen ] = React.useState( false );
    const { text, type } = useAlert();

    React.useEffect( () => {
        // Test for some condition that triggers the display of the Snackbar.
        if ( <Snackbar should be displayed> ) {
            setOpen( true );
        }
        
        // Dependencies array: see https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects
    }, [ <Dependencies array: includes value(s) used by the effect for the test condition> ] ); 

    if (text && type) {
        return (

            // when I use this, the message is displayed
            // <Alert variant="filled" severity={type} sx={{}}>
            //     {text}
            // </Alert>

            // when I use this, the message is NOT displayed
            <Stack spacing={2} sx={{ width: '100%' }}>
            <Snackbar open={open} autoHideDuration={6000}>
            <Alert variant="filled" severity={type} >
                {text}
            </Alert>
            </Snackbar>
            </Stack>

        );
    } else {
        return <></>;
    }
};