Für eine Komponente in Reaktion mit Reux, wie nicht Maus-Ereignis in einem Fall feuern und wie in einem anderen Fall Maus-Ereignis ausgelöst

Question

Ich habe eine Photo Komponente, es sieht wie folgt aus:

class Photo extends Component { 
    mouseEnter() { 
     //some actions 
    } 

    render() { 
     <img src={this.props.src} onMouseEnter={::this.mouseEnter}> 
    } 
} 

Photo wiederverwendet wird in anderen Komponenten. In einigen Komponenten möchte ich das Ereignis onMouseEnter von Photo auslösen, aber in einigen anderen Komponenten möchte ich das Ereignis onMouseEnter nicht auslösen.

class ComponentA extends Component { 
    render() { 
     <Photo {...this.props}></Photo> 
     //want to fire mouse enter event of Photo 
    } 
} 

class ComponentB extends Component { 
    render() { 
     <Photo {...this.props}></Photo> 
     //want to not fire mouse enter event of Photo 
    } 
} 

Wie dies zu implementieren?

Dank

Answer 1

In Requisiten in Ihrer Komponente als übergeben React Attribut mit keinem Wert erhalten als true Boolean übergeben. Zum Beispiel <Photo useMouseEnter /> gibt Ihnen this.props.useMouseEnter === true. Mit diesem können Sie steuern, ob mouseEnter verwendet wird oder nicht.

class Photo extends Component { 
    mouseEnter() { 
     //some actions 
    } 

    render() { 
     <img 
      src={this.props.src} 
      onMouseEnter={this.props.useMouseEnter ? 
       this.mouseEnter : null} 
     > 
    } 
} 

Der turnary Betrieb in OnMouseEnter wird this.mouseEnter passieren, wenn this.props.useMouseEnter sonst null existiert.

Answer 2

Sie können eine neue Stütze wie hireMouseEvent hinzufügen und auf dem es hinzufügen <Photo>

mouseEnter() { 
    if(this.props.hireMouseEvent) { 
    } 
} 

passieren, wenn Sie Ihre Komponente machen

<Photo hireMouseEvent={false}></Photo> 

Answer 3

Versuchen Sie Folgendes. Vergessen Sie nicht, onMouseEnter an die Fotoklasse zu binden.

Wenn Sie Ereignisse von Photo Komponente erhalten möchten, übergeben Sie onMouseEnter-Handler an Photo Komponente.

class Photo extends React.Component { 
 
\t onMouseEnter = evt => { 
 
\t \t !this.props.onMouseEnter && this.props.onMouseEnter(evt) 
 
\t } 
 

 
\t render() { 
 
\t \t return (
 
\t \t \t <img 
 
\t \t \t \t src={this.props.src} 
 
\t \t \t \t onMouseEnter={this.onMouseEnter} 
 
\t \t \t /> 
 
\t \t) 
 
\t } 
 
}