Question

如果用户单击第一个组件中的按钮，我想打开对话框（另一个组件）。

我的组件被编写为函数

第一部分：

function Bookings(props) {
      const [dialog, setDialog] = useState(false);

      function openUserDialog() {
           console.log("called")
           setDialog(true)
      }


      return (
          <div>
              <button onClick={openUserDialog}>open dialog</button>

              <BookingsUserDialog isOpen={dialog }/>
          </div>
      );
}
export default (Bookings);

次要组件（对话框）：

function BookingsUserDialog(props) {
const [isDialogOpened, setDialogOpened] = useState(false);

let open = props.isOpen;

if (open){
    console.log("should open dialog")
    // handleDialogOpen();
}

function handleDialogOpen() {
    setDialogOpened(true);
}

function handleDialogClose() {
    setDialogOpened(false);
}

return (
    <div>
        <Dialog
            fullWidth={true}
            maxWidth={"xs"}
            open={isDialogOpened}
            onClose={handleDialogClose}
            TransitionComponent={Transition}
            aria-labelledby="booking-dialog">

            some text

        </Dialog>
    </div>
);
}
export default (BookingsUserDialog);

如果我在 BookingsUserDialog 中调用了 handleDialogOpen ，我会得到

重新渲染过多。 React限制了渲染次数，以防止无限循环。

那么在子组件中更新状态的正确方法是吗？我想做的是当用户单击列表项时打开一个对话框。

Answer 1

最好让父组件处理对话框是打开还是关闭，子组件不需要其自己的状态，它只能使用isOpen属性。您也可以将setDialog函数作为道具传递给它，然后在对话框的false函数中使用handleDialogClose进行调用。

反应：实时更新子组件中的状态

1 个答案: