Вызов функции у потомка у родителя говорит "не функция"?

Question

Возможно, я неправильно понимаю, как отношения между родителями и ребенком должны работать в React (для него это новость), но в моем уме должно работать следующее:

У меня есть родитель по имени <Home/>, и в нем у меня есть ребенок по имени <ProjectDialog>, который представляет собой диалог материалов Google, который я собираюсь настроить после того, как получу эту работу.

У ребенка у меня следующий код:

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

Честно говоря, вполне нормальные вещи. Но я хочу быть в состоянии изменить открытое состояние от родителя, которое я пытаюсь здесь:

let dialog = <ProjectDialog/>;

class Home extends Component {

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

Но когда я щелкаю по любому из элементов, которые должны вызывать этот диалог, я получаю ошибку, что handleOpen () не является функцией.

Есть ли другой способ, которым я мог бы сделать это? Имеет ли смысл вместо этого хранить открытое состояние в подпорках и запускать его таким образом?

Answer 1

Так не должно быть.

Вы должны сделать это декларативно, то есть информация об открытии / закрытии должна храниться в родительском элементе и передаваться ребенку с реквизитом.

Примерно так:

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>
      ...
    )
  }
}