Я пытаюсь использовать response-scrollmagic , чтобы закрыть компонент после того, как он прокрутился до конца. Компонент фиксируется в слое z-index поверх другого.
Проблема в том, что это зависит от значения render-prop из сцены, поэтому я думаю, что мне нужно вызвать его в методе render. Это работает, но это не чисто и похоже на реакцию.
Консоль показывает ошибку: "Невозможно обновить во время существующего перехода состояния (например, в пределах render
). Методы рендеринга должны быть чистой функцией реквизита и состояния."
Я пытался переместить функцию (она идет как опора от родителя) в разные части рендера. Компонент componentDidUpdate не обновляется, поскольку состояние реквизита не изменяется.
class PageDetail extends PureComponent {
componentDidUpdate () {
console.log("updating") //never updates
}
changeVisibility = () => {
this.props.changeVisibility();
};
render() {
return (<div className="main">
<div className="body">
<div className="image">
</div>
<Controller globalSceneOptions={{
triggerHook: 'onEnter'
}}>
<Scene duration="100%">
{value => {. // value: 0 < 1
value === 1 && this.changeVisibility();
return <div style={{
opacity: `${1 - value}`
}} className="scene"></div>;
}}
</Scene>
</Controller>
</div>
</div>);
}
}
Извините, если есть простой ответ на этот вопрос, но я не могу обернуться вокруг него.