how to attach ref to compose component

Question

I am currently trying to get the child component functions using the ref in the following way but it doesn't show any of the details.

class ChildCompent extends React.Component {
  constructor(props){
    super(props);
  }

  _function1 =()=>{
     /* ...... */
  }

  _function1 =()=>{
    /* ...... */
  }
  render (){
     return (
        <div>
            ChildComponent
        </div>
    )
  }
}

let ComposedChild = compose(
  /* --- graphql query */
)(ChildComponent);



class ParentComponent extends React.Component {
   constructor(props){
     super(props);
   }

   _onClick = ()=>{
      console.log(this.refs.childComponent)
      // doesn't show the _function1 and _function2
   }

   render (){
      return (
          <div onClick={this._onClick}>
              <div>Testing</div>
              <ChildComponent ref="childComponent"/>    
          </div>        
     )
  }
}

This... isn't how you use `refs` at all. What exactly are you trying to do? — jered, Aug 08 '17 at 17:45
I am trying to execute the child functions under parent component @jered — Sai Ram, Aug 08 '17 at 17:56

score 0 · Answer 1 · answered Aug 08 '17 at 17:56

You should make use of ref callback to set ref on a component See this answer:

How to access a DOM element in React? What is the equilvalent of document.getElementById() in React

After that to access another component's function you can do that like this.childComponent._function1()

Also you need to make use of the component returned after wrapping it with the compose function in the ParentComponent.

class ChildComponent extends React.Component {
  constructor(props){
    super(props);
  }

  _function1 =()=>{
     /* ...... */
     console.log('hello');
  }


  render (){
     return (
        <div>
            ChildComponent
        </div>
    )
  }
}

let ComposedChild = compose(
      /* --- graphql query */
)(ChildComponent); 



class ParentComponent extends React.Component {
   constructor(props){
     super(props);
   }

   _onClick = ()=>{
      this.childComponent._function1()
      // doesn't show the _function1 and _function2
   }

   render (){
      return (
          <div onClick={this._onClick}>
              <div>Testing</div>
              <ComposedChild ref={(ref) => this.childComponent = ref}/>    
          </div>        
     )
  }
}

Assuming `class ChildCompent` is just a typo – Shubham Khatri Aug 08 '17 at 17:59 — Shubham Khatri, Aug 08 '17 at 17:59
Did you get a chance to check this out – Shubham Khatri Aug 12 '17 at 05:55 — Shubham Khatri, Aug 12 '17 at 05:55

how to attach ref to compose component

1 Answers1