Saya pemula di React.js.

Saya memiliki tombol sakelar yang menampilkan/menyembunyikan lapisan navigasi.

Dan file ini bernama Navi.js

Jika saya ingin meletakkan tombol sakelar yang sama yang menampilkan/menyembunyikan navigasi ke Home.js, Bagaimana cara memanggil fungsi sakelar?

Inilah yang saya coba sejauh ini di bawah ini. Tolong bantu.

Demo : https://codesandbox.io/s/49io4

Navi.js

import React, { useState } from "react";

const Navi = () => {
  const [show, setShow] = useState(false);
  const onToggleClick = () => {
    setShow(!show);
  };
  return (
    <div className="wrap-navi">
      <button onClick={onToggleClick} className={show ? "active" : ""}>
        toggle menu
      </button>
      <nav className={`layer1 ${show ? "active" : ""}`}>toggle1 Layer</nav>
    </div>
  );
};

export default Navi;

Beranda.js

import React from "react";

const Home = () => {
  return (
    <>
      Home
      {/* <button onClick={onToggleClick} className={show ? "active" : ""}>
        toggle menu
      </button> */}
    </>
  );
};

export default Home;
0
user1833620 10 Mei 2021, 09:24

1 menjawab

Jawaban Terbaik

Idealnya Anda ingin mempertahankan status sakelar di komponen yang lebih tinggi di pohon yang merender komponen home & navbar Anda, di mana komponen Home & Navbar bisa mendapatkan props dari komponen induk.

Atau Anda juga dapat menggunakan redux/mobx untuk mengelola status komponen saudara Anda di toko pusat dan berlangganan data apa pun yang Anda butuhkan.

Atau Anda juga dapat menggunakan context untuk menyelesaikannya.

Karena Anda sedang belajar bereaksi, opsi pertama tampaknya mudah diterapkan. Pindahkan status sakelar Anda ke komponen yang merupakan leluhur dari home & navbar. Temukan contoh untuk memberi Anda gambaran kasar di bawah ini:

export default function Parent(){
  // Store the state in the parent component
  const [showNav, setShowNav] = useState(false);

  // Create a callback to toggle the value of the state & pass it down the children
  const toggleNavbar = () => {
    setShowNav(currentValue => !currentValue);
  }

  return(
    <Home toggleNavbar={toggleNavbar} />
    <Navbar showNav={showNav} />
  )
}

// Home Component

export default function Home(props){
  return (
    <button onClick={props.toggleNavar}>Toggle Navbar</button>
  )
}


// Navbar Component
export default function Navbar(props){
  const showNav = props.showNav;

  return (
    <nav className={`layer1 ${showNav ? "active" : ""}`}>toggle1 Layer</nav>
  )
}
1
Kumar 10 Mei 2021, 07:23