Question

为什么在此处的codeandbox中更改状态不会重新加载/渲染/绘制页面。我还在不理解的地方添加了评论

https://codesandbox.io/s/material-demo-nb5ek?file=/demo.js

根据UI小吃店的主要材料，我做了同样的事情：唯一的区别是，我将click函数传递给child并从那里调用。

我已经在父级中创建了一个材料UI小吃栏，它是一个功能组件，并将下面显示的Route中的通知功能传递给了子级，后者也是一个功能组件。

  const [openNotification, setOpenNotification] = React.useState(false);
  const handleClose = (event, reason) => {
        if (reason === 'clickaway') {
        return;
        }

        setOpenNotification(false);
    };


  const notification = (status) => {
       setOpenNotification(status)
    }

  const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route exact {...rest} render={(props) => (
      <Component {...props} notification={notification}/>
  )} />
)

这是我在父级中使用的HTML。

<Snackbar
            anchorOrigin={{
            vertical: 'bottom',
            horizontal: 'left',
            }}
            open={openNotification}
            autoHideDuration={6000}
            onClose={handleClose}
            message='Success'
            action={
            <React.Fragment>
                <IconButton size="small" aria-label="close" color="inherit" onClick={handleClose}>
                <CloseIcon fontSize="small" />
                </IconButton>
            </React.Fragment>
            }
        />

在孩子中，我在提交功能中使用了这样的通知功能。

function handleSubmit() {
         props.notification(true)
      }

问题：快餐栏关闭时，页面呈现，我不希望它发生，因为它只是一个通知。我知道小吃店有一个与之相关的状态，该状态从“真”变为“假”。尽管此处的示例在小吃店关闭时不会从其文档沙箱再次呈现页面：https://codesandbox.io/s/5tgvq。简单的快餐栏文档的链接：https://material-ui.com/components/snackbars/

我尝试不使用状态，而只是创建一个变量并对其进行更新。但是，即使值变为true，小吃栏也不会打开

Material UI Snackback重新加载了Functional组件中的页面

0 个答案: