React .createClass() 滚动到参考：scrollIntoView 不是函数答案

【问题标题】：React .createClass() scroll to ref: scrollIntoView not a functionReact .createClass() 滚动到参考：scrollIntoView 不是函数
【发布时间】：2017-07-15 19:14:11
【问题描述】：

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

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

scrollIntoView 不是函数

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

我只是缺少像 using .createClass() is missing methods you get when using a class definition 还是我完全错误地接近这个？

我可以直接跳到使用一个包，但是像这样的事情是因为我无法理解作为本地人发生的事情，因为我可以打扰我。

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

应用程序

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

首页只是一个带有导航栏的包装器，它根据活动索引呈现子级

添加新项目 是一个组件，它将转到 /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>
        );
    }
});

【问题讨论】：

标签： javascript reactjs dom react-router

【解决方案1】：

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

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

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

【讨论】：

非常感谢。这并不明显，在我找到这个答案之前，我一直把头撞在墙上。
谢谢。这确实是非常有用的提示！

【解决方案2】：

已接受答案中的概念特别适用于来自 UI 框架的元素，例如 Reactstrap、Semantic UI、Material UI 等。

当它们具有相同的名称时，很容易忘记这一点。

ReactStrap 中的<Input> 或<Form> 不是<input> 或<form>！

如已接受的答案所示，这种带有 ref 的组件“不是带有 DOM 元素方法的 DOM 元素”。

【讨论】：