通过 React 中的父组件触发另一个组件中的操作

Question

有两个组件有一个父组件，我想通过它们的父组件在另一个组件中触发一个动作。到目前为止我试过这个：

_mevent_show.js.jsx（分量之一）：

gotoSearchPage() {
  this.props.gotoSearchPage()
},

return (
  <i className="fas fa-search"
      onClick={this.gotoSearchPage}>
  </i> )

_body.js.jsx（父级）

gotoSearchPage() {
   this.calendar.changePropertyInCalendar()
},

render () {
  <Calendar mevents={this.state.mevents} ref={calendar => this.calendar = calendar}>
}

_calendar.js.jsx（应触发其动作的其他组件）

changePropertyInCalendar() {
  this.setState({searchPage: true})
},

这些代码会产生类似 this.calendar is null 的错误。我正在使用 react-rails gem。有什么建议吗？谢谢

Answer 1

我看你的父组件 (_body) 没有控制 state，正如我看到的 _calendar组件正在处理 state，但它是子组件，父组件无法访问 state。因此，您必须构建您的应用程序，因为父级是负责人，并且是唯一可以更新 UI 的 'state' 的应用程序，这还将通过 props 分发 values或 context.

通过 React 中的父组件触发另一个组件中的操作

Trigger an action in another component through their parent in React

reactjs

react-rails