En la pantalla pequeña, no se muestra/oculta. ¿Cómo puedo cambiar este código para que funcione en la pantalla pequeña?
import React from 'react'; import assets from './assets'; import { FaBars, FaFacebook, FaRegHeart, FaInstagram, FaLinkedin, FaStar, FaStarHalf, FaTimes, FaTwitter } from 'react-icons/fa'; var navLinks = document.getElementById('navLinks'); function showMenu() { navLinks.style.right = "0"; } function hideMenu() { navLinks.style.right = "-200px"; }La var anterior funcionó algunas veces por error, pero todavía no lo entendí.
export const Home = () => ( <> <section class="header"> <nav> <a href="/"><img src={assets.logo} alt='Logo' width='100%' /></a> <div id='navLinks' class='nav-links'> <FaTimes class='fa' onClick={showMenu} /> <ul> <li><a href="/">HOME</a></li> <li><a href="/About">ABOUT</a></li> <li><a href="/Course">COURSE</a></li> <li><a href="/Blog">BLOG</a></li> <li><a href="/Contact">CONTACT</a></li> </ul> </div> <FaBars class='fa' onClick={hideMenu} /> </nav> <div class="text-box"> <h1>World's Biggest University</h1> <p>Making website is now one of the easiest thing in the world. You just need to learn HTML, CSS,<br />Javascript and you are good to go.</p> <a href="/Contact" class="hero-btn">Visit Us to Know More</a> </div> </section> </> )Mi archivo CSS está debajo. He intentado de muchas formas pero no he podido.
nav .fa{ display: none; }Como algunas personas han mencionado antes, no está utilizando la biblioteca React correctamente.
El código ( no probado ) a continuación debería ser más adecuado para usted. Como puede ver, se ha utilizado un state en lugar de cambiar directamente las propiedades del estilo. He tratado de comentar el código lo más claramente posible, pero para obtener instrucciones más detalladas, recomiendo leer los documentos de React.
import React, { useState } from 'react'; import assets from './assets'; import { FaBars, FaFacebook, FaRegHeart, FaInstagram, FaLinkedin, FaStar, FaStarHalf, FaTimes, FaTwitter } from 'react-icons/fa'; export const Home = () => { // Set state value to keep track of menu open or closed status const [navOpen, setNavOpen] = useState(false) // Open the active menu const open = () => { setNavOpen(true) } // Close the active menu const close = () => { setNavOpen(false) } return ( <> <section class="header"> <nav> <a href="/"><img src={assets.logo} alt='Logo' width='100%' /></a> <div id='navLinks' class='nav-links'> <button onClick={open}> <FaTimes class='fa' /> </button> { // Only render the UL node when the navOpen variable is true navOpen && ( <ul> <li><a href="/">HOME</a></li> <li><a href="/About">ABOUT</a></li> <li><a href="/Course">COURSE</a></li> <li><a href="/Blog">BLOG</a></li> <li><a href="/Contact">CONTACT</a></li> </ul> ) } </div> <button onClick={close}> <FaBars class='fa' /> </button> </nav> <div class="text-box"> <h1>World's Biggest University</h1> <p>Making website is now one of the easiest thing in the world. You just need to learn HTML, CSS,<br />Javascript and you are good to go.</p> <a href="/Contact" class="hero-btn">Visit Us to Know More</a> </div> </section> </> ) }