0

Tengo un problema para aplicar un efecto que se aplica cuando hago scroll en la pantalla y que debe aplicarse si la propiedad es true. Cuando inicia la app y la navego funciona, pero cuando lo hago por segunda vez en programs falla, es decir, lo sigue aplicando pese a que le estoy pasando false.. por que falla? Gracias! este es mi codigo:

app.js -- > aqui le paso la propiedad true para que aplique o no el efecto sobre el componente float player.

<Route path="/" exact render={(props) => <Home {...props} FloatPlayerVisible={true} />}/>

<Route path="/programas" exact render={(props) => <Programs {...props} FloatPlayerVisible={false} />} />

Home.js recibe el parametro y lo aplica sobre el componente.

<FloatPlayer  handleEffectScroll={this.props.FloatPlayerVisible} />

Program.js tambien lo recibe

export default function ProgramSection(props){


    return(
            <div>
                <ProgramsSection handleEffectScroll={props.FloatPlayerVisible} />
                <FloatPlayer handleEffectScroll={props.FloatPlayerVisible}/>
            </div>

        )
    }

Y finalmente en FloatPlayer mediante jquery lo aplico.

floatplayer.js

export default class FloatPlayer extends React.Component {
    constructor(props) {
        super(props)
    }

    componentDidMount() {

        if (this.props.handleEffectScroll == true) {

            $('.float-player').addClass('hide-play');

            $(window).scroll(function () {
                if ($(document).scrollTop() > 400) {
                    $('.float-player').removeClass('hide-play').addClass('show-play')
                } else {
                    $('.float-player').removeClass('show-play').addClass('hide-play')
                }
            })
        } else {
            $('.float-player').removeClass('hide-play').addClass('show-play')
        }

    }

return (
            <React.Fragment>

                <div className="row float-player"> 
                  .....codigo
                </div>
            </React.Fragment>
)

}

2 respuestas 2

0

Intenta hacerlo en el método componentWillReceiveProps.

export default class FloatPlayer extends React.Component {
    constructor(props) {
        super(props)
    }

    componentWillReceiveProps(nextProps){
        if (nextProps.handleEffectScroll == true) {
            $('.float-player').addClass('hide-play');
            $(window).scroll(function () {
                if ($(document).scrollTop() > 400) {
                    $('.float-player').removeClass('hide-play').addClass('show-play')
                } else {
                    $('.float-player').removeClass('show-play').addClass('hide-play')
                }
            })
        } else {
            $('.float-player').removeClass('hide-play').addClass('show-play')
        }
    }

    return (
        <React.Fragment>
            <div className="row float-player"> 
                .....codigo
            </div>
        </React.Fragment>
    )
}
1
  • Thanks @Juan, but dosen t work..
    – Phil
    el 24 mar. 2019 a las 22:01
0

El problema era que como estaba aplicando el scroll con jquey sobre window una vez que lo aplicaba no lo estaba elinando dentro del else, lo solucione agregando un

$(window).off('scroll')

muchas gracias!

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.