2017-10-11 61 views
0

我在做我的第一个反应过来+终极版应用程序,我有一个问题。我有一个呈现输入字段的组件,并且,由于某些内容被添加到它上面,我需要它来scrollIntoVIew。我的组件是否需要强制更新为scrollIntoView?

所以,我刚添加的scrollIntoView在组件componentDidUpdate()的生命周期方法:

componentDidUpdate() { 
    console.log("scroll"); 
    this.refs.input.scrollIntoView(); 
} 

唯一的问题是,这部分不会重新渲染每次(在它没有什么变化),所以scrollIntoVIew被称为只有一次。

我可能会迫使更新组件,但是这是不是真的很好的做法是不是?在这种情况下我能做些什么?

+0

尝试强制回流与例如'this.refs.offsetTop'。 https://gist.github.com/paulirish/5d52fb081b3570c81e3a –

+0

@ Theo.T你能带着几分更多的细节解释您的解决方案,我有点失去了 –

+0

啊,对不起,我误解你的问题。但是,它是什么意思来触发scrollInToView?属性更改,用户事件? –

回答

0

您可以调用setState并每次添加内容以重新呈现组件时更新组件状态中的某个对象,并且将调用componentDidUpdate
你也可以使用第二个参数(回调),以setState,但阵营文档说以下有关的setState秒参数:

第二个参数是将 执行一次的setState是一个可选的回调函数完成并且组件被重新渲染。 一般来说,我们建议使用componentDidUpdate(),用于这种逻辑 代替。

+0

当然是的,但我要寻找一个更清洁的方式来做到这一点 –

+1

在这种情况下,而不是使用'componentDidUpdate'它可能会更好使用'setState'回调(第二个参数)要调用的方法。 –

+0

虽然不推荐。看到我更新的答案https://github.com/facebook/react/issues/6320 – Dane

相关问题