如何从React.js中的另一个js文件切换

Question

我是React.js的初学者。

我有显示/隐藏导航层的切换按钮。

这个名为Navi.js的文件

如果我想设置显示/隐藏导航到Home.js的相同的切换按钮，我如何调用切换函数？

这就是我在下面尝试过的。请帮帮忙。

演示：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;

Home.js

import React from "react";

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

export default Home;

Answer 1

理想情况下，您希望在树中的较高组件中维护切换状态，这将同时呈现您的home和navbar组件，其中Home和Navbar组件都可以从父组件获得道具。

或者您也可以使用redux/mobx来管理中央存储中的同级组件的状态，并订阅所需的任何数据。

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

由于您正在学习react，第一个选项似乎很容易实现。将您的切换状态移动到一个组件，该组件是家庭和导航栏的祖先。下面找一个例子给您一个粗略的想法：

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