如何在父 React 组件中调用 iScroll 刷新方法？

Question

我正在努力将 iScroll 与 reactJS 结合使用。
此代码示例是用打字稿编写的。

我为 iScroll 创建了一个包装器 class：

import * as React from 'react';
import * as ReactDOM from 'react-dom';

var iScroll = require('iscroll');        
...

    componentDidMount() {
            this._initializeIScrollInstance();
            console.log(this);
        }

    _initializeIScrollInstance() {
            setTimeout(() => {
                let element = ReactDOM.findDOMNode(this);
                const iScrollInstance = new iScroll(element, this.props.options);
                this._iScrollInstance = iScrollInstance;
            }, 100);
        }

    render() {
                return (
                    <div style={ this.props.style } >
                        { this.props.children }
                    </div>
                )
            }
        }

然后我在侧边栏中这样使用它 class 例如。

<ScrollWrapper>
 <SidebarMenu toggle={ this.toggle.bind(this) } />
</ScrollWrapper>

我面临的问题是当我在侧边栏中切换菜单时。这意味着高度发生变化，所以我需要为 iScroll 调用刷新方法。
但是我怎样才能做到这一点？
我可以在我的父组件中获取_iScrollInstance吗？

可以在我的侧边栏中保留状态并将其作为属性传递给 ScrollWrapper 并在 componentReceiveProps 中观察它。但这对我来说听起来像是一个廉价的解决方案。
有人可能对这类问题有更好的解决方案吗？

Answer 1

根据您的代码：

<ScrollWrapper>
 <SidebarMenu toggle={ this.toggle.bind(this) } />
</ScrollWrapper>

我看到子组件操作（切换）需要对父组件（滚动）执行某些操作。执行此操作的惯用方法是让父组件为子组件提供一个函数（回调），当子组件希望父组件中的某些内容发生更改时，该函数将调用该函数（回调）。

注意：推荐的方法是使用 flux ... 但那是另一个主题（我使用的是查找 redux）。

如何在父 React 组件中调用 iScroll 刷新方法？

How do I call the iScroll refresh methode in a parent react component?

iscroll

typescript

reactjs