У меня есть проблема, чтобы применять эффект, который применяется, когда я делаю scroll на экране, и что должен применяться, если свойство - true. Когда он инициализирует app, и я она перехожу с одного сайта на другой функционируй, но когда я это делаю во второй раз в programs недостаток, а именно, он продолжает применять это несмотря на то, что я прохожу с ним false. по, что не удается? Спасибо! это мой код:
app.js-> здесь я перемещаю его свойство true для того, чтобы он применил или нет эффект на компонент float player.
<Route path="/" exact render={(props) => <Home {...props} FloatPlayerVisible={true} />}/>
<Route path="/programas" exact render={(props) => <Programs {...props} FloatPlayerVisible={false} />} />
Home.js получает параметр и это применяет на компоненте.
<FloatPlayer handleEffectScroll={this.props.FloatPlayerVisible} />
Program.js также это получает
export default function ProgramSection(props){
return(
<div>
<ProgramsSection handleEffectScroll={props.FloatPlayerVisible} />
<FloatPlayer handleEffectScroll={props.FloatPlayerVisible}/>
</div>
)
}
И в конце концов в FloatPlayer посредством jquery я это применяю.
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>
)
}
Попробуй делать это в 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>
)
}