score:4
Accepted answer
you can still use react.createref()
. only string refs and callbacks are deprecated/in the process of being deprecated.
import react, {component, createref} from 'react'
class app extends component {
myref = createref() // create a ref object
scrolltoref = () =>
window.scrollto(0, this.myref.current.offsettop);
render() {
return <div ref={this.myref}></div>
}
}
score:0
try to component for animating vertical scrolling https://www.npmjs.com/package/react-scroll
score:1
react.createref
was introduced in 16.3
, so you could use that. put it on an element and use the scrollintoview
method on the current
property, which is the dom node.
example
class app extends react.component {
bottomref = react.createref();
onclick = () => {
this.bottomref.current.scrollintoview();
};
render() {
return (
<div>
<button onclick={this.onclick}>scroll to bottom</button>
<div style={{ height: 2000 }} />
<div ref={this.bottomref}>bottom</div>
</div>
);
}
}
reactdom.render(<app />, document.getelementbyid("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
Source: stackoverflow.com
Related Query
- React + Redux: Scrolling a DOM element after state change
- Scrolling to DOM Element in React
- How to access a DOM element in React? What is the equilvalent of document.getElementById() in React
- React Error: Target Container is not a DOM Element
- React - getting a component from a DOM element for debugging
- React - check if element is visible in DOM
- Getting DOM node from React child element
- React wrapper: React does not recognize the `staticContext` prop on a DOM element
- How to solve Warning: React does not recognize the X prop on a DOM element
- Correct way to define an empty dom element in React
- React Uncaught Error: Target container is not a DOM element
- Return DOM element in render function of React component
- Material-UI React does not recognize the `underlineStyle` prop on a DOM element
- Pass React Ref from parent to child in order to get DOM element
- Warning: React does not recognize the X prop on a DOM element
- React - Uncaught Error: Target container is not a DOM element
- Pass DOM Element as a prop in React
- Add/Remove class to parent DOM element React js
- How to solve Warning: React does not recognize the `currentSlide`, ` slideCount` prop on a DOM element
- Get element position in the DOM on React DnD drop?
- React and using ReactDOM.createPortal() - Target container is not a DOM element Error
- How to conditionally add attributes to react DOM element
- React Typescript tests - Target container is not a DOM element
- How to check if Dom Element or React Component
- React 13.3 unmountComponentAtNode() Error: Target container is not a DOM element
- React does not recognize the `toggleNode` prop on a DOM element
- React JS. Append element to the DOM
- Render multiple React components into a single DOM element
- React + Backbone, Target container is not a DOM element
- Input-Component: React does not recognize the prop on a DOM Element
More Query from same tag
- Why is React Router taking me to the correct path, but not displaying the corresponding component?
- Illegal constructor Java script
- How to make a component visible/available only for few set of users in react?
- Component stopped to re-render after using privateroute
- Sanity & GROQ - How to fetch items that does not have a category?
- ReactJS : Parsing error: Unexpected token
- How do I change `src` folder to something else in create-react-app
- How to change color button onclick react.js
- React renders component many times when fetching data
- how to use curly braces inside text in react
- It works fine but I need to refresh whole page while switching from home to about and vice-versa. Please, am working on v5.3.0 react-router-dom
- How to create a React ready made component template/snippet/LiveTemplate in WebStorm?
- Split string in React
- How to store javascript objects in a database
- How to efficiently change value for a certain key in object that has recursion in JS/TS
- How to render a component using variable or props?
- Jest.js test doesn't work with Intl.NumberFormat
- Is there any way to import JavaScript function to React component outside from src folder
- Laravel Sanctum and ReactJS SPA CORS error
- Props Parent component to a parent - child component
- Access Individual Elements in an Array from an API (react)
- Building a product-filter in NodeJS/MongoDB: only works when selecting all filters
- Can't use Material UI in external library with webpack/rollup/react
- State is not triggering re-render after change in state
- The content of URL won't display
- How to add a fade transition while updating the content react
- How to post image with fetch?
- Looping Components in ReactJS
- Response to preflight request doesn't pass access control check: It does not have HTTP ok status - React issue
- How to insert a hubspot form in a react js app?