javascript - 我们可以在 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
}

这段代码只是想问我们是否可以创建对类的引用并使用它们来调用它们各自的方法。我们可以在 React js 中做到这一点吗？如果可以，有什么方法可以做到这一点，如果我们不能……那为什么呢？

标签： javascriptreactjsreact-redux

Answer 1

当然，您只需实例化一个 QuackBehavior 对象。

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();
  }
}

但是，我强烈建议您避免在 React 项目中使用类继承。

React 更喜欢组合模式而不是继承模式。

看看这篇文章React – Composition Vs. 遗产