javascript - 从父级调用子级中的函数显示 "not a function"？

Question

我可能误解了 React 中的父子关系应该如何运作(对于它来说是新手)，但我认为以下内容应该有效:

我有一个家长叫 <Home/>其中，我有一个 child 叫<ProjectDialog>这是一个 Google Material 对话框，我将在让它工作后对其进行自定义。

在 child 中我有以下代码:

handleOpen = () => {
    this.setState({ open: true });
};

说实话，这很正常。但我希望能够从父级更改打开状态，我在这里尝试:

let dialog = <ProjectDialog/>;

class Home extends Component {

    handleCardClick = id => {
        dialog.handleOpen();
    };

但是当我单击任何应该触发此对话框的元素时，我收到错误消息:handleOpen() 不是函数。

还有其他方法可以做到这一点吗？将打开状态存储在 props 中并以这种方式触发它是否有意义？

Answer 1

事情不应该这样进行。

您必须以声明方式执行此操作，这意味着打开/关闭信息应保存在父级中，并通过 props 传输给子级。

类似这样的事情:

class Home extends Component {
  state = {
    isDialogOpen: false
  }

  handleOpen = () => this.setState({ isDialogOpen: true })

  render() {
    return (
      ...
      <ProjectDialog isOpen={ this.state.isDialogOpen } />
      ...
      <button onClick={ this.handleDialogOpen }>
        Open project dialog
      </button>
      ...
    )
  }
}