Question

当我试图滚动到“参考”时，我无法弄清楚出了什么问题。我一直在疯狂地搜索并找到了完全合理的网址，但它在我的场景中无效。

我有一个使用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>
        )
    }
});

主只是一个包含导航栏的包装器，它根据活动索引呈现子项

添加新项目 是一个组件，它将转到/页面/ [新创建的项目的索引]

页

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

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

Answer 2

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

当他们有相同的名字时，这很容易被忘记。

ReactStrap 中的

<Input> 或 <Form> 不是 <input> 或 <form> ！

这种带有 ref 的组件“不是带有 DOM 元素方法的 DOM 元素”，正如公认的答案所表明的那样。

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

2 个答案: