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.

Como enviar datos funcionales a otra página en React

31 Jul, 2023 Programación

Archivo Playing.js

import { useState } from "react";

function Playing() {
  const [sidebar, setSidebar] = useState(false);

  const sidebarFunc = () => {
    sidebar ? setSidebar(false) : setSidebar(false);
  }

  return (
    <i onclick="{sidebarFunc}">Haz clic</i>
  );
}

export default Playing;

Archivo Sidebar.js

function SideBar() {
  return (
    <div classname="">Barra lateral</div>
  );
}

export default SideBar;

Archivo App.js

import Sidebar from "./Sidebar.js";
import Playing from "./Playing.js";

function App() {
  return (
    <>
      <sidebar></sidebar>
      <playing></playing>

  );
}

Soy nuevo en react, así que trata de evitar errores de mi parte. Aquí estoy intentando una forma en la que después de hacer clic en el texto “Haz clic”, la variable de estado “sidebar” se active. Pero “sidebar” no se pudo exportar para obtener un resultado para la función “div” de “Sidebar” como “<div classname=”sidebar ? ” mostrar”:”ocultar”=””>Barra lateral

“.

¿Existe alguna solución para lo mismo o alguna otra forma en que se pueda hacer?
Gracias de antemano.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Según el código proporcionado, parece que el estado sidebar se declara y actualiza correctamente utilizando el hook useState() en el archivo Playing.js.

    Para mostrar el componente SideBar de manera condicional, en función del valor del estado sidebar, podemos modificar el archivo App.js de la siguiente manera:

    import Sidebar from "./Sidebar.js";
import Playing from "./Playing.js";
function App(){
  const [sidebar, setSidebar] = useState(false);

  return(
    <>
      <i onclick="{()" ==""> { setSidebar(!sidebar) }}>Click</i>
      { sidebar && <sidebar></sidebar> }
      <playing></playing>

  );
}

    Aquí, hemos declarado el estado sidebar en el componente App y lo hemos vinculado a los componentes Playing y Sidebar.

    Al hacer clic en el elemento i, alternamos el valor de sidebar utilizando la función setSidebar().

    El componente Sidebar se muestra condicionalmente (solo cuando sidebar es true), utilizando la renderización condicional en línea (usando el operador &&).

    ¡Espero que esto ayude!

Comments are closed.