如何识别在 React 中单击了哪个菜单项？答案

【问题标题】：How to identify which menu item has been clicked in React?如何识别在 React 中单击了哪个菜单项？
【发布时间】：2021-02-14 13:17:36
【问题描述】：

我是 React 新手，我正在尝试实现一个小型应用程序，该应用程序将根据用户在首页点击的内容加载不同的 DOM。这是我的App.js

import './App.css';
import MenuItems from './components/Navbar/MenuItems';
import ReactDOM from 'react-dom'
import React from 'react'

function App() {
  const apples = <h1 style={{textAlign: "center"}}>Apples</h1>;
  const oranges = <h1 style={{textAlign: "center"}}>Oranges</h1>;
  const bananas = <h1 style={{textAlign: "center"}}>Bananas</h1>;
  const click = () => {
    ReactDOM.render(
      apples,
      document.getElementById('root')
    )
  }
  let items = MenuItems.MenuItems.map((item,index) =>{
    console.log(item);
    return (<li onClick={click}>{item.title}</li>);
  })
  console.log(items)
  return (
    <div className="App">
      <div className="content">
        <h1>Fruit page</h1>
        {items}
      </div>
    </div>
    
  );
}

export default App;

当用户单击位于Menu.js 中的任何菜单项时调用函数“click”

const MenuItems = [
    {
        title: 'Apples',
        url: '#',
        cName: 'nav-links'
    },
    {
        title: 'Oranges',
        url: '#',
        cName: 'nav-links'
    },
    {
        title: 'Bananas',
        url: '#',
        cName: 'nav-links'
    },
]
export default {MenuItems}

问题是，我想根据用户的点击来呈现一个特定的 const 元素。当前，当单击任何菜单项时会加载“apples”。因此，我需要将参数传递给 click 函数以识别要加载的元素，但我该怎么做呢？提前致谢。

【问题讨论】：

在此之前，为什么要在函数组件内部调用ReactDOM.render？只需使用条件渲染。
@DennisVash 因为我是 React 世界的初学者，请提出解决方案：)
事件对象作为参数传递给您的 onClick 函数，所以只需使用 event.target; ` const click = (event) => {...`
@Mr.Engineer 我建议至少阅读一次 React 文档

标签： javascript reactjs

【解决方案1】：

我猜你试图显示选定的标题，一种可能的方法可能是：

const MenuItems = [
  {
    title: "Apples",
    url: "#",
    cName: "nav-links"
  },
  {
    title: "Oranges",
    url: "#",
    cName: "nav-links"
  },
  {
    title: "Bananas",
    url: "#",
    cName: "nav-links"
  }
];

function App() {
  const [selectedItem, setSelectedItem] = useState();

  return (
    <div className="App">
      <div className="content">
        <h1>Fruit page</h1>
        {MenuItems.map((item, index) => (
          <li
            key={index}
            onClick={() => setSelectedItem(item.title)}
            style={{ cursor: "pointer" }}
          >
            {item.title}
          </li>
        ))}
        {selectedItem && (
          <h1 style={{ textAlign: "center" }}>{selectedItem}</h1>
        )}
      </div>
    </div>
  );
}

【讨论】：