如何在 reactjs 中更改子組件 state

Question

我遇到了以下問題：我需要在組件內部使用另一個組件的 function：

header.js

export default function Header() {

  const [showModalLogin ,setShowModalLogin] = useState(false);

  return(
    <>
    <span>Hi,  <Link onClick={() =>{ setShowModalLogin(true)}}>login</Link> </span>
    {showModalLogin ? <LoginModal setShowModalLogin={setShowModalLogin}/> : ''}
    </>
  );
}

主頁.js

import Header from '../../components/header/header';

export default function Home() {

  return (
    <>
      <Header />
      <Link onClick={() =>{ setShowModalLogin(true)}}>open login</Link>
    </>
}

如何在home.js中調用header.js中的setShowModalLogin function？ 我也在嘗試使用上下文api，但我仍然無法解決它。

Answer 1

您可以將 useState 放在 Header 組件中並將 setShowModalLogin 作為道具傳遞：

import Header from '../../components/header/header';

export default function Home() {
  const [isShowModalLogin ,setShowModalLogin] = useState(false);

  return (
    <>
      <Header isShowModalLogin={isShowModalLogin} setShowModalLogin={setShowModalLogin} />
      <Link onClick={() => setShowModalLogin(true)}>open login</Link>
    </>
}

export default function Header({ isShowModalLogin, setShowModalLogin }) {
  return(
    <>
    <span>Hi,  <Link onClick={() => setShowModalLogin(true)}>login</Link> </span>
    {isShowModalLogin ? <LoginModal setShowModalLogin={setShowModalLogin}/> : ''}
    </>
  );
}

Answer 2

然后你可以這樣做：

1. 創建上下文
2. 將useState保存在里面
3. 在任何需要的地方使用它

export const YourContext = createContext();

export const YourProvider = ({ children }) => {
  const [isShowModalLogin, setShowModalLogin] = useState(false);

  const value = {
    isShowModalLogin,
    setShowModalLogin
  };

  return <YourContext.Provider value={value}>{children}</YourContext.Provider>;
}

// App.js

const App = () => {
  return (
    <YourProvider>
      <AppContent />
    </YourProvider>
  )
}

所以現在你可以像這里一樣使用它：

import Header from '../../components/header/header';

export default function Home() {
  const { isShowModalLogin, setShowModalLogin } = useContext(YourContext);

  return (
    <>
      <Header isShowModalLogin={isShowModalLogin} setShowModalLogin={setShowModalLogin} />
      <Link onClick={() => setShowModalLogin(true)}>open login</Link>
    </>
}