Каков правильный способ работы со строкой в React? Мне очень нравится плавная прокрутка из-за лучшего UX. Поскольку манипулирование DOM в React является анти-шаблоном, я столкнулся с проблемой: как прокручивать плавно в какую-то позицию/элемент? Обычно я изменяю значение scrollTop элемента, но это манипуляция с DOM, которая не разрешена.
код:
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
handleClick = e => {
for (let i = 1; i <= 100; i++) {
setTimeout(() => (this.node.scrollTop = i), i * 2);
}
};
render() {
const someArrayToMap = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
return (
<div ref={node => this.node = node} style={{overflow: 'auto', height: '100vh'}}>
<button onClick={this.handleClick}>CLICK TO SCROLL</button>
{
[...someArrayToMap,
...someArrayToMap,
...someArrayToMap,
...someArrayToMap,
...someArrayToMap,
...someArrayToMap,
...someArrayToMap].map((e, i) => <div key={i}>some text here</div>)
}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
Как достичь этого в режиме Реагирования?