当我尝试滚动到“参考”时，我无法弄清楚出了什么问题。我一直在疯狂地搜索并找到完全有意义的 url，但它在我的场景中不起作用。

• https://github.com/yannickcr/eslint-plugin-react/issues/678
• http://codepen.io/takatama/pen/mVvbqx

我有一个使用 react 15.4.2 和 react-router 3.0.0 的应用程序。我有一个到一个组件的路由，它接受一个可选的路由参数，我正在尝试使用它滚动到 componentDidUpdate() 上的元素。我试过实现几种不同的方式，但在遵循 ref.scrollIntoView() 的最新实现时，我收到一个错误...

scrollIntoView 不是函数

我确保在 componentDidUpdate() 时存在“ref 回调”。

我是否只是缺少使用 .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>
        );
    }
});