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是我使用的）。

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

1 个答案: