让导航栏在 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只是一个提示。