React .createClass（）滚动到引用：scrollIntoView不是函数

Jeff 发表于 Dev

杰夫

我在尝试滚动到“引用”时遇到麻烦。我一直在疯狂搜索，发现完全有意义的网址，但在我的情况下不起作用。

我有一个使用react 15.4.2和react-router 3.0.0的应用程序。我有一个到组件的路由，该组件带有一个可选的route参数，并试图使用它来滚动到componentDidUpdate（）上的元素。我尝试了几种不同的实现方式，但是在遵循ref.scrollIntoView（）的最新实现时，出现了一个错误...

scrollIntoView不是函数

我确保在componentDidUpdate（）时存在“引用回调”。

我是否只是缺少使用.createClass（）之类的东西，或者缺少使用类定义时获得的方法，还是我完全错了？

我可以跳到使用一个程序包，但是像这样的事情使我无法理解原生时所发生的事情。

已简化代码以展示问题，同时保持类似的流程。代码语法可能存在差异。

应用程式

const App = React.createClass({
    render() {
        return (
            <Router history={ appHistory }>
                <Route path='home' component={ Home }>
                    <IndexRoute component={ Page } />
                    <Route path='page(/:itemIndex)' component={ Page } />
                </Route>
                <Route path='add-new-item' component={ AddNewItem } />
            </Router>
        )
    }
});

HOME只是带有导航栏的包装程序，该导航栏基于活动索引渲染子级

添加新项目是将转到/ page / [新创建项目的索引]的组件

页

const Page = React.createClass({
    getInitialState() {
        return {
            data: undefined,
            scrollTo: parseInt(this.props.params.goalIndex) || undefined
        };
    },

    componentWillMount() {
        // this gets data and does a setState for data
    },

    componentDidUpdate() {
        let { scrollTo } = this.state;

        if( scrollTo && this['item-' + scrollTo] ) {
            this['item-' + scrollTo].scrollIntoView();
        }
    },

    renderTiles() {
        return this.state.data.map( ( item, index ) => {
            return (
                <Item
                    key={ 'item-' + index }
                    ref={ node => this['item-' + index] = node }
                >
                    <p>foo bar...</p>
                </Item>
            )
        });
    },

    render() {
        return (
            <div>
                { this.state.data && this.renderTiles() }
            </div>
        );
    }
});

杰夫

带有ref的嵌套React组件就是那个，而不是带有DOM元素方法的DOM元素，因此Element方法将不可用。

为了轻松修复，您可以将React组件包装在标准DOM元素中，并为其分配一个引用。

renderTiles() {
    return this.state.data.map( ( item, index ) => {
        return (
            <div
                key={ 'item-' + index }
                ref={ node => this['item-' + index] = node }
            >
                <Item>
                    <p>foo bar...</p>
                </Item>
            </div>
        )
    });
},

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。