如何從 React.js 中的另一個 js 文件切換

Question

我是 React.js 的初學者。

我有顯示/隱藏導航層的切換按鈕。

這個文件名為Navi.js

如果我想將顯示/隱藏導航的相同切換按鈕放置到Home.js ，如何調用切換 function？

這是我到目前為止嘗試過的。 請幫忙。

演示： https://codesandbox.io/s/49io4

導航.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;

主頁.js

import React from "react";

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

export default Home;

Answer 1

理想情況下，您希望在樹中的較高組件中維護切換 state，該組件呈現您的主頁和導航欄組件，其中主頁和導航欄組件都可以從父組件獲取道具。

或者您也可以使用 redux/mobx 來管理中央存儲中的兄弟組件的 state 並訂閱您需要的任何數據。

或者您也可以使用context來完成它。

由於您正在學習反應，第一個選項似乎很容易實現。 將您的切換 state 移動到作為主頁和導航欄祖先的組件。 在下面找到一個例子給你一個粗略的想法：

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>
  )
}