es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo puedo desplazarme a una sección específica?

15 Jul, 2023 Programación

Estoy usando Draft JS de Facebook en React.

Mi draft agrega decoradores al texto cuando la línea comienza con # Nombre de sección. En otro componente de mi página, quiero crear un enlace que haga que haga scroll hacia esa sección cuando se haga clic.

Mi decorador es bastante básico:

{
    strategy: (contentBlock: any, callback: any) => {
        const REGEX = /^(# .+)$/
        findWithRegex(REGEX, contentBlock, callback)
    },
    component: (props: any) => {
        return <h3>{props.children}</h3>
    },
}

Mi enlace de navegación:

<a onclick="{()=">{
   window.scrollTo() // Scroll hasta el Título 1 en DraftJS
}}>Título 1</a>

En los viejos días de JS, encontraba una manera de crear un ID y obtener el elemento, pero no es la forma de React.

Cualquier ayuda es apreciada. Gracias.

EDIT: Aquí hay un codesandbox para jugar

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para hacer que el enlace se desplace a la sección en DraftJS, podemos usar una combinación de ReactDOM.findDOMNode y window.scrollTo. Primero, necesitamos agregar un id único a la sección decorada modificando la función del componente en el decorador de la siguiente manera:

    component: (props: any) => {
    return <h3 id="{props.children}">{props.children}</h3>;
}

    Luego, en el componente Nav, podemos agregar una función onClick que encuentra el nodo DOM con el id especificado y se desplaza hasta él:

    <a onclick="{()" ==""> {
    const node = ReactDOM.findDOMNode(document.getElementById('Title 1'));
    if (node) {
        window.scrollTo(0, node.offsetTop);
    }
}}>Title 1</a>

    Aquí, ReactDOM.findDOMNode encuentra el nodo DOM con el id “Title 1” y node.offsetTop obtiene el desplazamiento vertical del nodo desde la parte superior del documento. Por último, pasamos estos valores a window.scrollTo para desplazarnos hasta la sección.

    Ten en cuenta que ReactDOM.findDOMNode está obsoleto en React 17 y se eliminará en futuras versiones, por lo que es posible que se deban encontrar soluciones alternativas para futuras actualizaciones.

Comments are closed.