Заставить навигационную панель работать в React. Отправить функцию ребенку через реквизит?

Question

В настоящее время в моем компоненте приложения есть следующий код. Скорее, наличие Navbar, непосредственно вложенного в мой компонент App, - это способ иметь отдельный файл navbar. js с компонентом Navbar, которому передается функция "setshow ()" через props. Затем через onClick все еще можно изменить то, что отображается в функции «Показать» родительского приложения.

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, или вы просто заинтересованы в передаче props компоненту 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 - просто чаевые.