如何调用依赖于render-prop值的函数？

Question

我尝试使用 react-scrollmagic 关闭滚动到底部的组件。该组件固定在另一个组件的z-index层中。

问题在于它取决于场景中的 render-prop值，所以我认为我需要在render方法中调用它。它可以工作，但不是纯粹的反应型。

控制台显示错误：“无法在现有状态转换过程中（例如，在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>);
  }
}

很抱歉，这样的答案很简单，但我无法将其包裹住。