reactjs - Children to children components communication -

i have 1 parent component name [parent-1] , 1 child component name [child-1]. now, have few more other components name [other-1] , [other-2].

now passing [other-1] , [other-2] component [child-1] component. jsx rendering correct. how can access [other-1/2] component functions [child-1] ? or how can pass props [child-1] [other-1/2] ?

by using refs able call [other-1/2] functions [parent-1] want access [child-1]. tried passing refs [child-1] <child abc={() => this.refs.other1.hello()}/> or <child abc={this.refs.other1.hello()}/> not working.

by using global event emitter way able achieve solution above problem. not sure if that's appropriate way in react.js

i think you're not using refs properly.

when try give arrow function refs sometime causes error due ref returning null. see my question find out why.

the example should understand refs

hope helps!

class others1 extends react.component {    log(){      console.log('hello others1')    }    render() {      return <h1>others1</h1>    }  }     class others2 extends react.component {    log(){      console.log('hello others2')    }    render() {      return <h1>others2</h1>    }  }       class child extends react.component{    other1ref(el) {      el.log()    }    other2ref(el) {      el.log()    }    render() {      const others1 = this.props.others1      const others2 = this.props.others2      return (        <div>         <others1 ref={this.other1ref}/>         <others2 ref={this.other2ref}/>        </div>      )    }      }    class parent extends react.component{    render() {      return <child others1={others1} others2={others2}/>    }  }    reactdom.render(<parent/>, document.getelementbyid('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>  <div id="app"></div>