Can we create and store references to classes in another component in React js

Question

class FlyBehaviour {
  fly = () => {
    // abstract
  };
}

class QuackBehaviour {
  quack = () => {
    // abstract
  };
}

class FlyWings extends FlyBehaviour {

  fly = () => {
    return <p>I can Fly</p>;
  };
}

class NoFly extends FlyBehaviour {
  fly = () => {
    return <p>I cannot Fly</p>;
  };
}

class QuackSound extends QuackBehaviour {
  quack = () => {
    console.log("Quacking");
    return <p>Quack Quack</p>;
  };
}

class Duck extends React.Component {
  constructor(props) {
    super(props);
    QuackBehaviour q; // creating a reference to class QuackBehaviour 
    FlyBehaviour f ;
  }
// some methods that use q and f references
}

This code is just to ask whether can we create references to classes and use them to call their respective methods. Can we do that in React js. If we can, what is the way to do that and if we can't...then why though ?

Benjamin · Accepted Answer · 2020-10-27 22:48:40Z

1

Sure, you would simply instantiate a QuackBehavior object.

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

    this.QuackBehaviour = new QuackBehaviour(); // creating a reference to class QuackBehaviour 
    this.FlyBehaviour = new FlyBehaviour() ;
  }
// some methods that use q and f references
  quack = () => {
    this.QuackBehaviour.quack();
  }
  
  fly = () => {
    this.FlyBehaviour.fly();
  }
}

However, I would strongly advise you to avoid using Class inheritance in React projects.

React favors the composition pattern over the inheritance pattern.

Take a look at this article React – Composition Vs. Inheritance

answered Oct 27, 2020 at 22:48

Benjamin

3,6941 gold badge19 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Benjamin Over a year ago

@Abdullah Ch did this answer your question?

Collectives™ on Stack Overflow

Can we create and store references to classes in another component in React js

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related