问题描述
当我尝试滚动到引用"时，我很难弄清楚出什么问题了.我一直在疯狂搜索，发现完全有意义的网址，但在我的情况下不起作用.
I'm having trouble figuring out what's wrong when I'm trying to scroll to a "ref". I've been searching like mad and found urls which make complete sense, but it won't work in my scenario.
我有一个使用react 15.4.2和react-router 3.0.0的应用程序.我有一个到组件的路由，该组件带有一个可选的route参数，并试图使用它来滚动到componentDidUpdate()上的元素.我尝试了几种不同的实现方式，但是在遵循ref.scrollIntoView()的最新实现时，出现了一个错误...
I have an app using react 15.4.2 along with react-router 3.0.0. I have a route to a component that takes an optional route parameter and am trying to use that to scroll to the element on componentDidUpdate(). I've tried implementing a couple different ways but in following the most recent implementation of ref.scrollIntoView() I get an error...
我确保在componentDidUpdate()时存在引用回调".
I made sure that the "ref callbacks" exist at the time of componentDidUpdate().
我只是错过了使用.createClass()之类的东西吗，还是缺少使用类定义时获得的方法，还是我完全错了呢?
Am I just missing something like using .createClass() is missing methods you get when using a class definition or am I approaching this entirely wrong?
我可以跳到使用一个程序包，但是像这样的事情使我无法理解自己作为母语时正在发生的事情.
I could just jump to using a package, but things like this in not being able to understand what's going on when being as native as I can bother me.
APP
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>
)
}
});
首页只是带有导航栏的包装程序，它基于活动索引呈现子项
HOMEis just a wrapper with a nav bar that renders children based on an active index
添加新项目是将转到/page/[新创建的项目的索引]
ADD NEW ITEMis a component which will goto /page/[index of newly created item]
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方法将不可用.
A nested React component with a ref is just that and not a DOM element with DOM element methods so Element methods will not be available.
要轻松修复，您可以将React组件包装在标准DOM元素中，并为其分配一个引用.
To easily fix, you can wrap the React component in a standard DOM element and assign a ref to that.
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>
)
});
},
这篇关于React .createClass()滚动到引用:scrollIntoView不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！