Question

我正在从父组件的按钮单击上打开模型（子组件），它打开得很好，但是没有关闭，并且显示了一些错误：

未捕获的TypeError：setOpen不是子组件的函数

这是我的父母组件

->whereBetween(
    $dateColumn, 
    [ min($startingDate, $endingDate), max($startingDate, $endingDate) ]
)

我的孩子组件

<TableCell>
<Button
    variant="contained"
    size="small"
    color="primary"
    onClick={() => deleteHandler(index)}
>
    Delete Me
</Button>
</TableCell>
{console.log(open)}

{open && <AddList open={open} setOpen={open} />}

Answer 1

您的第一个问题是您要为Boolean道具传递setOpen而不是setOpen函数本身，因此将其更改为setOpen={setOpen}。

// RenderList.js

const RenderList = props => {
  // ...
  return (
    ...
    {open && <AddList open={open} setOpen={setOpen} />}
  )
}

第二个问题是您没有在TransitionsModal组件中正确破坏道具。使用{}破坏props对象并获取您需要的对象。

// AddList.js

export default function TransitionsModal({ open, setOpen }) {
  // ...
}

这是固定的示例：

CodeSandbox

希望这会有所帮助。

Answer 2

嗨，看看这个

https://codesandbox.io/s/frosty-bird-5yh5g

在RenderList.js中，您没有通过setOpen

{open && <AddList open={open} setOpen={setOpen} />}

还有export default function TransitionsModal({ open, setOpen }) {

模态不使用父子组件关闭ReactJS钩子

2 个答案: