CODEWITHSUNDEEP
reactjs
CrazySynthax
CrazySynthax

Reputation: 15018

React: how can I access the methods of the class that generates JSX?

Let's say I have the following classes: 

class App {
    constructor() {
        super();         
        this.pawns[3][2] = this.getRegPawn(PAWN.BLUE);
        debugger;   /// HERE !!!
    }

    getRegPawn(pawnType) {
        return <RegularPawn pawnType={pawnType}/>;
    }    
}

    class RegularPawn extends AbstractPawn {

        constructor(props) {
            super(props);
        }

        isBasicMove() {
            ...
        }

        isStrikeMove() {
           ....
            }
            return false;
        }

        render() {
            const _this = this;
            switch (this.props.pawnType) {
                case PAWN.BLUE:
                    pawn = <div className="bluePawn" ref = {() => {return _this}}></div>;
                    break;
                case PAWN.RED:
                    pawn = <div className="redPawn" ref = {() => {return _this}}></div>;
                    break;
            }
            return pawn;
        }
    }

My intention is to access the methods in class RegularPawn by accessing this.pawns[3][2].

The object stored in this.pawns[3][2] is:

enter image description here

I tried: this.pawns[3][2].isBasicMove()

this.pawns[3][2].props.isBasicMove()

this.pawns[3][2].ref.isBasicMove()

this.pawns[3][2].props.ref.isBasicMove()

and none of them succeeded. Do you know what can help me?

Upvotes: 1

Views: 44

Answers (1)

Ankari
Ankari

Reputation: 619

In order to use functions from the child components you will need to use references instead of the return value of the createElement call from react (which is the return value of a JSX tag).

You can pass the ref callback to child components and use the returned value to assign the pawn matrix.

Here is a simple example how to use it versus what you are trying to do:

The Alert1 Button behaves as you use it, it won't work, on the other hand Alert2 button is using ref which is the way to go.

class Hello extends React.Component {
	constructor() {
  super();
   this.child = <Child ref={(ref) => {this.child2 = ref;}} />
   console.log(this.child);
  }
  
  childAllert1() {
  this.child.allert();
  }
  
  childAllert2() {
  this.child2.allert();
  }

  render() {
    return (
    <div>
    Hello {this.props.name}
    <button onClick={this.childAllert1.bind(this)} >Alert1</button>
    <button onClick={this.childAllert2.bind(this)} >Alert2</button>
    {this.child}
    </div>);
  }
}

class Child extends React.Component {

  allert() {
		alert("called");
  }
  render() {
    return <div>Hello
    </div>;
  }
}


ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);
<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="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

Upvotes: 1

Related Questions