Для компонента в React с Reux, как не срабатывает событие мыши в одном случае и как огонь событие мыши в другом случае

Question

У меня есть Photo компонент, это выглядит следующим образом:

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

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

Photo повторно используется в других компонентах. В некоторых компонентах я хочу запустить событие onMouseEnterPhoto, но в некоторых других компонентах я не хочу запускать событие onMouseEnter.

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 
    } 
} 

Как это реализовать? Благодаря

Answer 1

В React реквизита передаются в компонент как атрибут без значения передается как true boolean. Например, <Photo useMouseEnter /> предоставит вам this.props.useMouseEnter === true. Используя это, вы можете управлять смайликом. Используется mouseEnter.

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

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

turnary операция в OnMouseEnter будет проходить this.mouseEnterthis.props.useMouseEnter, если существует в противном случае null.

Answer 2

Вы можете добавить новую опору, как hireMouseEvent и передать его <Photo>

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

Добавьте его, когда вы предоставляете ваш компонент

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

Answer 3

Попробуйте следующее. Не забудьте связать onMouseEnter с классом фотографии.

Если вы хотите получать события от Photo, то передайте компонент inMouseEnter обработчику на Photo.

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 } 
 
}