Bonjour à tous ceux que je suis débutant dans le développement frontal et j'ai besoin de faire réagir de la barre de navigation réactive. Je trouve certains qui fonctionnent dans HTML mais pas dans la réaction. Je ne sais pas puis-je faire de cette façon. Je pense que le problème est dans GetElementyID car réagir ne les soutient pas.

import React from "react";
import { Link } from "react-router-dom";
import "./index.css";

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
function Header() {
  return (
    <nav>
      <div className="topnav" id="myTopnav">
        <a href="#home" className="active">
          Home
        </a>
        <a href="#news">News</a>
        <a href="#contact">Contact</a>
        <a href="#about">About</a>
        <a href="javascript:void(0);" className="icon" onclick={myFunction}>
          <i className="fa fa-bars"></i>
        </a>
      </div>
    </nav>
  );
}

export default Header;
1
jvzznjs 24 mars 2021 à 14:39

2 réponses

Meilleure réponse

<₹Updated

Placez myFunction() à l'intérieur Header() Comme il s'agit d'un composant basé sur la fonctionnalité.

Voici le composant Header} ressemble à des modifications suivantes:

import React from "react";
import { Link } from "react-router-dom";
import "./index.css";

function Header() {
  const myFunction = () => {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
      x.className += " responsive";
    } else {
      x.className = "topnav";
    }
  }

  return (
    <nav>
      <div className="topnav" id="myTopnav">
        <a href="#home" className="active">
          Home
        </a>
        <a href="#news">News</a>
        <a href="#contact">Contact</a>
        <a href="#about">About</a>
        <a href="javascript:void(0);" className="icon" onClick={myFunction}>
          <i className="fa fa-bars"></i>
        </a>
      </div>
    </nav>
  );
}

export default Header;

S'il vous plaît visitez ce lien pour voir: Code Sandbox Live Demo

1
Rashed Rahat 24 mars 2021 à 14:47

Ceci est CSS

 .topnav {
      overflow: hidden;
      background-color: black;
    }
    
    .topnav a {
      float: left;
      display: block;
      color: #f2f2f2;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
      font-size: 17px;
    }
    
    .topnav a:hover {
      background-color: #ddd;
      color: black;
    }
    
    .topnav .icon {
      display: none;
    }
    
    @media screen and (max-width: 600px) {
      .topnav a {
        display: none;
      }
      .topnav a.icon {
        float: right;
        display: block;
      }
    }
    
    @media screen and (max-width: 600px) {
      .topnav.responsive {
        position: relative;
      }
      .topnav.responsive .icon {
        position: absolute;
        right: 0;
        top: 0;
      }
      .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
      }
    }
0
jvzznjs 24 mars 2021 à 11:46