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

Question

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

我为 iScroll 创建了一个包装类：

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>
                )
            }
        }

然后我在我的侧边栏类中像这样使用它。

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

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

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

Answer 1

根据您的代码：

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

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

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