¿Cómo puedo desplazar un div para que sea visible en ReactJS?– Incluso si tenemos un buen plan de proyecto y un concepto lógico, dedicaremos la mayor parte de nuestro tiempo a corregir errores sobre javascript y html. Además, nuestra aplicación puede ejecutarse sin errores evidentes con JavaScript, debemos usar varias formas para asegurarnos de que todo funciona correctamente. En general, hay dos tipos de errores que encontrará al hacer algo mal en el código:Errores de sintaxis y errores de lógica.Para facilitar la corrección de errores, cada error de JavaScript se captura con un seguimiento completo de la pila y se marca la línea específica del código fuente. Para ayudarlo a resolver el error de JavaScript, mire la discusión a continuación para solucionar el problema sobre ¿Cómo puedo desplazar un div para que sea visible en ReactJS?
Problema :
Tengo una lista emergente que es undivisiónque contiene una lista vertical de childdivisións. He agregado navegación de teclado hacia arriba/abajo para cambiar qué niño está resaltado actualmente.
En este momento, si presiono la tecla de abajo suficientes veces, el elemento resaltado ya no es visible. Lo mismo ocurre también con la tecla arriba si se desplaza la vista.
¿Cuál es la forma correcta en React para desplazar automáticamente a un niño?división¿a la vista?
Solución :
Supongo que tienes algún tipo deListacomponente y algún tipo deArtículocomponente. la forma en que lo hiceen un proyectoera dejar que el elemento supiera si estaba activo o no; el elemento le pediría a la lista que se desplace a la vista si es necesario. Considere el siguiente pseudocódigo:
clase Lista extiende Reaccionar.Componente{prestar() {devolver <división>{this.props.items.map(this.renderItem)}división>; }renderItem(artículo) {devolver <Artículo llave={Identificación del artículo} artículo={artículo} activo={Identificación del artículo===este.props.activeId} desplácese a la vista={this.scrollElementIntoViewIfNeeded}/>}scrollElementIntoViewIfNeeded(domNode) {eracontainerDomNode =Reaccionar.encontrarDOMNode(este);// Determinar si `domNode` encaja completamente dentro de `containerDomNode`. // De lo contrario, configure el scrollTop del contenedor de manera adecuada.}}clase Artículo extiende Reaccionar.Componente{prestar() {devolver <división>algo...división>; }componenteDidMount() {este.asegurarVisible(); }componenteDidUpdate() {este.asegurarVisible(); }asegurarVisible() {si(este.accesorios.activo) {este.accesorios.desplácese a la vista(Reaccionar.encontrarDOMNode(este)); } }}Probablemente, una mejor solución sea hacer que la lista sea responsable de desplazar el elemento a la vista (sin que el elemento sepa que está incluso en una lista). Para ello, puede agregar unárbitroatribuir a un elemento determinado y encontrarlo con eso:
clase Lista extiende Reaccionar.Componente{prestar() {devolver <división>{this.props.items.map(this.renderItem)}división>; }renderItem(artículo) {eraactivo = artículo.identificación===este.accesorios.identificación activa;eraaccesorios = {llave: artículo.identificación,artículo: artículo,activo: activo };si(activo) { accesorios.árbitro="elemento activo"; }devolver <Artículo{...accesorios} />}componenteDidUpdate(anteriorAccesorios) {// solo se desplaza a la vista si el elemento activo cambió la última vez que se renderizó si(este.accesorios.identificación activa!== accesorios anteriores.identificación activa) {este.asegurarActiveItemVisible(); } }asegurarActiveItemVisible() {eraitemComponent =este.árbitros.elemento activo;si(elementoComponente) {eradomNode =Reaccionar.encontrarDOMNode(elementoComponente);este.scrollElementIntoViewIfNeeded(domNode); } }scrollElementIntoViewIfNeeded(domNode) {eracontainerDomNode =Reaccionar.encontrarDOMNode(este);// Determinar si `domNode` encaja completamente dentro de `containerDomNode`. // De lo contrario, configure el scrollTop del contenedor de manera adecuada.}}Si no quiere hacer los cálculos para determinar si el elemento está visible dentro del nodo de la lista, puede usar elmétodo DOMdesplácese a la vista()o el específico de WebkitscrollIntoViewIfNeeded, cualtiene un polyfill disponiblepara que pueda usarlo en navegadores que no sean Webkit.
Para React 16, la respuesta correcta es diferente de las respuestas anteriores:
clase Algo extiende Componente { constructor (accesorios) {súper(accesorios);este.boxRef =Reaccionar.createRef(); } prestar() {devolver( este.boxRef}/>); }} Luego, para desplazarse, simplemente agregue (después del constructor):
componenteDidMount() {si(este.accesorios.activo) {// cualquiera que sea tu prueba este.cajaRef.actual.desplácese a la vista(); }}Nota: debe usar '.current' y puede enviar opciones para scrollIntoView:
desplácese a la vista({comportamiento:'liso',bloquear:'centro',en línea:'centro',});(Encontrado enhttp://www.albertgao.xyz/2018/06/07/scroll-a-not-in-view-component-into-the-view-using-react/)
Al leer la especificación, fue un poco difícil descubrir el significado de bloque e inline, pero después de jugar con él, descubrí que para una lista de desplazamiento vertical, block: 'end' se aseguraba de que el elemento fuera visible sin desplazar artificialmente la parte superior. de mi contenido fuera de la ventana gráfica. Con 'centro', un elemento cerca de la parte inferior se deslizaba demasiado hacia arriba y aparecía un espacio vacío debajo. Pero mi contenedor es un padre flexible con justificación: 'estirar', por lo que puede afectar el comportamiento. No profundicé mucho más. Los elementos con desbordamiento oculto afectarán la forma en que actúa scrollIntoView, por lo que probablemente tendrá que experimentar por su cuenta.
Mi aplicación tiene un padre que debe estar a la vista y, si se selecciona un hijo, también se desplaza a la vista. Esto funcionó bien ya que el DidMount padre ocurre antes que el DidMount del hijo, por lo que se desplaza al padre, luego, cuando se procesa el hijo activo, se desplaza más para mostrarlo.
Otro ejemplo que usa la función en ref en lugar de cadena
clase Lista extiende Reaccionar.Componente {constructor(accesorios) {súper(accesorios);este.estado = { artículos:[], índice:0};este._nodos = nuevo Mapa();este.handleAdd =este.handleAdd.bind(este);este.handleRemove =este.handleRemove.bind(este); } handleAdd() { let startNumber =0;si(este.estado.elementos.longitud) { númeroInicio =este.estado.elementos[este.estado.elementos.longitud -1]; } let elementos nuevos =este.estado.elementos.empalme(0);para(sea i = número de inicio; i < número de inicio +100; i++) { artículos nuevos.push(i); }este.setState({ elementos: nuevos elementos }); } manejarEliminar() {este.setState({ elementos:este.state.items.slice(1) }); } manejarMostrar(i) {este.setState({índice: i});constantenodo =este._nodos.conseguir(i); consola.log(este._nodos);si(nodo) { ReactDOM.findDOMNode(nodo).scrollIntoView({bloque:'fin', comportamiento:'liso'}); } } prestar() {devolver( {este.state.items.map((elemento, i) => (este._nodos.colocar(i, elemento)}>{elemento}))}
{este.estado.index} ); }}clase Artículo extiende Reaccionar.Componente{ prestar() {devolver(este.listItem = elemento }> {este.props.niños} ); }}Manifestación:https://codepen.io/anon/pen/XpqJVe
Para aprovechar la respuesta de @Michelle Tilley, a veces quiero desplazarme si la selección del usuario cambia, así que activo el desplazamiento encomponenteDidUpdate. También hice algunos cálculos matemáticos para averiguar qué tan lejos debía desplazarse y si era necesario desplazarse, lo que para mí se parece a lo siguiente:
componenteDidUpdate() {dejarpanel, nodo;si(este.árbitros.sección seleccionada&&este.árbitros.item seleccionado) {// Este es el contenedor que desea desplazar.tablero =este.árbitros.panel de lista;// Este es el elemento que desea hacer visible en el contenedor // Nota: Puede anidar referencias aquí si desea un elemento con el elemento seleccionadonodo =ReactDOM.encontrarDOMNode(este.árbitros.item seleccionado); }si(panel && nodo && (nodo.Desplazamiento superior> tablero.Desplazarse hacia arriba+ panel.Altura compensada|| nodo.Desplazamiento superiorDesplazarse hacia arriba)) { panel.Desplazarse hacia arriba= nodo.Desplazamiento superior- tablero.Desplazamiento superior; } } En caso de que alguien tropiece aquí, lo hice de esta manera.
componenteDidMount(){constantenodo =este.árbitros.rastreadorRef; nodo && nodo.desplácese a la vista({bloquear:"fin",comportamiento:'liso'}) }componenteDidUpdate() {constantenodo =este.árbitros.rastreadorRef; nodo && nodo.desplácese a la vista({bloquear:"fin",comportamiento:'liso'}) }prestar() {devolver(<división>{mensajes.mapa((mensaje, índice) => { volver (<Mensaje llave={índice} msgObj={mensaje}{/*<pag>algún texto de pruebapag>*/}Mensaje>) })}<división estilo={{altura:'30 píxeles'}}identificación='#rastreador' árbitro="referencia del rastreador">división> división>) }desplácese a la vistaes una característica DOM nativaenlace
Siempre se muestrarastreadordivisión
Con ganchos reacciona:
- Importar
importarReactDOMde 'reaccionar-dom';importarReaccionar, {useRef}de 'reaccionar';- Hacer nuevo gancho:
constantedivRef = useRef(nulo); - Agregar nueva división
<división árbitro={divRef}/>- Función de desplazamiento:
const scrollToDivRef =()=>{ dejar nodo = ReactDOM.findDOMNode(divRef.actual)comoElemento; nodo.scrollIntoView({bloque:'comenzar', comportamiento:'liso'});}En su controlador de tecla arriba/abajo, solo necesita configurar elDesplazarse hacia arribapropiedad del div que desea desplazar para que se desplace hacia abajo (o hacia arriba).
Por ejemplo:
JSX:
controlador de tecla arriba/abajo:
this.refs.foo.getDOMNode().scrollTop += 10
Si hace algo similar a lo anterior, su div se desplazará hacia abajo 10 píxeles (suponiendo que el div esté configurado para desbordarseautooDesplazarseen css, y su contenido se desborda, por supuesto).
Deberá ampliar esto para encontrar el desplazamiento del elemento dentro de su div de desplazamiento al que desea desplazar el div hacia abajo, y luego modificar elDesplazarse hacia arribapara desplazarse lo suficiente para mostrar el elemento en función de su altura.
Eche un vistazo a las definiciones de scrollTop y offsetTop de MDN aquí:
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop
Solo estoy agregando un poco más de información para otras personas que buscan una capacidad de desplazamiento en React. Había vinculado varias bibliotecas para hacer Scroll-To para mi aplicación, y ninguna funcionó desde mi caso de uso hasta que encontré react-scrollchor, así que pensé en pasarlo.https://github.com/bySabi/react-scrollchor
Tenía un NavLink que quería que cuando hiciera clic se desplazara a ese elemento como lo hace el ancla con nombre. Lo implementé de esta manera.
<Enlace de navegaciónal hacer clic = {() => este.Desplazarse a Href('planes')}>Nuestro planesEnlace de navegación> scrollToHref =(elemento) =>{dejarnodo;si(elemento ==='cómo'){ nodo =ReactDom.encontrarDOMNode(este.árbitros.cómo);consola.registro(este.árbitros) }demás si(elemento ==='planes'){ nodo =ReactDom.encontrarDOMNode(este.árbitros.planes); }demás si(elemento ==='acerca de'){ nodo =ReactDom.encontrarDOMNode(este.árbitros.acerca de); } nodo.desplácese a la vista({bloquear:'comenzar',comportamiento:'liso'}); }Luego doy el componente que quería desplazar a una referencia como esta
árbitro="planes"/> FAQs
How do I change visibility in React? ›
To achieve this, add one more prop called visible to the component: const ToggleVisibility = ({ ... + visible = true, children }) => { - const [show, setShow] = useState(true) + const [show, setShow] = useState(visible) return (...) }
How do I scroll to a specific div in react JS? ›React 16.3 +, Class component
myRef}>Element to scroll to</div> } executeScroll = () => this. myRef. current. scrollIntoView() // run this method to execute scrolling. }
Using the logical AND (&&) operator
When the “Toggle show” button is clicked once, isOpen is set to true. MyComponent re-renders and the component Popup is rendered as a React element. If the button is clicked again, isOpen is set to false and the Popup component is not rendered.
To hide a button in React, you can use the style attribute and set the display property to "none" . This can be done inline or by adding it to a CSS file and referencing the class in your button element.
What is the visibility hidden in div? ›The hidden attribute hides the <div> element. You can specify either 'hidden' (without value) or 'hidden="hidden"'. Both are valid. A hidden <div> element is not visible, but it maintains its position on the page.
What is change visibility? ›The visibilitychange event is fired at the document when the contents of its tab have become visible or have been hidden. The event is not cancelable.
How do I scroll down a div? ›jQuery scroll to the bottom of div set the scrollTop property of a div's JavaScript to the value of scroll height property to scroll to the bottom. ScrollTop and height() methods in jQuery can be used to scroll a page from top to bottom automatically.
How do I scroll content in a div? ›It can be easily done by using the overflow property. The overflow property has different values. E.g., overflow: auto; and an axis hiding procedure like overflow-x: hidden; and overflow-y: auto; will make a bar scrollable vertically and horizontally, and the "auto" value will add only a vertically scrollable bar.
How to toggle a div using js? ›In the toggleClass() function, we have accessed the div element using its id. After that, we apply the toggle() method on the classList of the div element. The classList property returns all the div element's classes in the array format.
How do I hide display elements? ›display property is also used to hide the HTML element. It can have values like 'block,' 'inline,' 'inline-block,' etc., but the value used to hide an element is 'none. ' Using JavaScript, we set the style. display property value to 'none' to hide html element.
How do you know if an element is visible in React? ›
Checking if an element is visible on the user screen is very easy using the Intersection Observer API. This API is supported by all major browsers. The Intersection Observer API allows us to detect intersections of an element with another element.
How do I hide and show an image in React? ›In React, you can use the an onError (or onLoad ) event handler on the image to either hide the image or reset the image src attribute. In either case, it will hide the broken image icon shown by the browser when an image fails to load.
How do I make my floating action button invisible? ›Example# To show and hide a FloatingActionButton with the default animation, just call the methods show() and hide() . It's good practice to keep a FloatingActionButton in the Activity layout instead of putting it in a Fragment, this allows the default animations to work when showing and hiding.
How do I disable or hide a div? ›Nope! Divs can't be disabled. Only form and form elems. Actually in Quirks-mode IE can disable a div , but it only grays button texts, it doesn't prevent events firing.
Which can be used to hide a div object? ›You can hide an element by using the Boolean attribute hidden with the element. When you specify the hidden attribute in the HTML file, then the browser will not display that element, which is specified with this attribute.
What are the 3 types of visibility? ›With respect to visibility, there are five main types: flight visibility, ground visibility, prevailing visibility, runway visible value, and runway visible range.
What is the purpose of visibility? ›Visibility is also important and can be productive in identifying problems before they erupt into larger issues. Problems surfaced as part of a walk-thru, department visit, casual conversation or simply “being there” can be addressed proactively before they reach a level of crisis or escalated concern.
What is visible and invisible change? ›Visible changes are those that a user or customer can see or experience such as a new operation, an altered operation, or an existing operation that performs faster. Invisible changes are not seen or experienced by an external user or customer.
How do you make an image more accessible in React? ›The alt (or “alternate”) attribute is another quick way of making your React app more accessible. When a screen reader reaches an image, it will read out loud the alt text to provide a description of the image's content. The purpose of the alt text is for the person hearing it to understand the content of the image.