score:2

theoretically you could achieve this by using refs. in the parentwindow component you would assign a ref to the cloned children, that you would then pass as a prop to the navigation.

react works a bit different than other js libraries and it forces you to move your business logic, or event logic to the parent component and pass it down as props. what i would suggest is that you pass in a callback function to the navigation page, that when triggered it calls the contactpage method.

class navigation extends react.component {
  render() {
    this.props.onalertparent();
    return <div>navigate me</div>;
  }
}

class parentwindow extends component {
  alertchild() {
    if (this.childnode && this.childnode.testme) {
      this.childnode.testme();
    }
  }

  render() {
    <div>
      <navigation onalertparent={() => this.alertchild()} />
      <p>sub pages</p>
      <reactcsstransitiongroup
        component="div"
        transitionname="page-transition"
        transitionentertimeout={0}
        transitionleavetimeout={500}
      >
        {react.cloneelement(this.props.children, {
          key: location.pathname,
          ref: (node) => { this.childnode = node; }
        })}
      </reactcsstransitiongroup>
    </div>
  }
}

notice how the navigation component receives a callback function via the props, the navigation element doesn't need to know anything about its siblings, it's communicating to them using the parent.

the react way is to communicate between components using props by passing either data or callbacks. there is always a better way to communicate than calling element methods. even the approach i suggested is flawed since it's still calling a method from an element.


Related Query

More Query from same tag