讓導航欄在 React 中工作。 通過道具向孩子發送function？

Question

我的 App 組件中目前有以下代碼。 與其將 Navbar 直接嵌套在我的 App 組件中，還有一種方法可以讓單獨的 navbar.js 文件與 Navbar 組件一起通過道具傳遞“setshow()”function。 然后通過 onClick 仍然可以更改“顯示”父應用程序 function 中呈現的內容。

import React,{ useState } from 'react';
import Home from './components/Home'
import Selfdev from './components/Selfdev'
import Webdev from './components/Webdev'


function App() {


  const [show,setshow] = useState(<Home/>)

  return (
    <div className="App">
     <div id="Navbar" className="">
      <div onClick={() => setshow(<Home/>)} className="cursor-pointer">Home</div>
      <div onClick={() => setshow(<Webdev/>)} className="cursor-pointer">Webdev</div>
      <div onClick={() => setshow(<Selfdev/>)}>Selfdev</div>
    </div>
    {show} 
    </div>
  );
}

export default App;

Answer 1

你可以有這樣的東西：

 const Navbar = ({ setshow }) => (
  <div id="Navbar" className="">
    <div onClick={() => setshow(<Home />)} className="cursor-pointer">
      Home
    </div>
    <div onClick={() => setshow(<Webdev />)} className="cursor-pointer">
      Webdev
    </div>
    <div onClick={() => setshow(<Selfdev />)}>Selfdev</div>
  </div>
)

function App() {
  const [show, setshow] = useState(<Home />)

  return (
    <div className="App">
      <Navbar setshow={setshow} />
      {show}
    </div>
  )
}

我不確定您的問題是基於不同的 Navbar 語義，還是您只是有興趣將道具傳遞給 Navbar 組件，就像上面的示例一樣？

為了將導航欄分離到自己的文件中，請執行以下操作：

創建Navbar.js ：

import React from 'react'

import Home from './components/Home'
import Selfdev from './components/Selfdev'
import Webdev from './components/Webdev'

const Navbar = ({ setshow }) => (
  <div id="Navbar" className="">
    <div onClick={() => setshow(<Home />)} className="cursor-pointer">
      Home
    </div>
    <div onClick={() => setshow(<Webdev />)} className="cursor-pointer">
      Webdev
    </div>
    <div onClick={() => setshow(<Selfdev />)}>Selfdev</div>
  </div>
)

export default Navbar

然后像這樣修改你的主文件：

import React, { useState } from 'react'

import Navbar from './Navbar'
import Home from './components/Home'

function App() {
  const [show, setshow] = useState(<Home />)

  return (
    <div className="App">
      <Navbar setshow={setshow} />
      {show}
    </div>
  )
}

export default App

此外，在 JS 中更喜歡使用camelCase ，因此您將使用setShow setshow只是一個提示。