javascript - Es6 React Refs to components -

how reference component using react es6?

i have component a

class componenta extends react.component {     dosomethingincomponenta() {        //do here..     } } render(<componenta />, document.getelementbyid('container')); 

and component b want call componenta's method

class componentb extends react.component {     dosomethingincomponentb() {         componentainstance.dosomethingincomponenta()     } } 

how reference componenta? have tried using

var componentainstance = render (<componenta />,  document.getelementbyid('container')) export default componentainstance; 

but since using webpack , componenta.jsx entry point error

module not found: error: dependency entry point not allowed 

is there workaround this?

react encourages build applications 1 way data flows. if <componentb /> direct child of <componenta /> can pass data (and functions) using props.

function componenta() {   const dosomething = () => console.log('i did something');    return (     <componentb onclick={dosomething} />   ); }  function componentb(props) {   return (     <button onclick={props.onclick}>example<button>   ); } 

however, if <componentb /> parent of <componenta />, or has no direct connection it, need introduce event/state management system allow components communicate.

the popular pattern solving problem called flux , popular flux implementation redux.

with library redux, components dispatch actions modify state of central store. other components in application can listen changes in store , respond accordingly.

in case, you'd need dosomethingincomponentb method dispatch action change store. <componenta /> need subscribe changes , call dosomethingincomponenta method after appropriate state changed.