组件内部的反应触发功能答案

【问题标题】：React trigger function inside component组件内部的反应触发功能
【发布时间】：2022-01-15 01:43:23
【问题描述】：

我正在开发一个动态侧边栏，它根据登录的用户映射菜单项。

我遇到的问题是触发功能组件内的功能。我的组件看起来像这样 -

popout.js

import React from 'react'

export default function PopOut({listitems}) {
const togglePopout =()=>{
console.log("Popout")
}
    return (
        listitems.map((child) => {
                <div>{child.label}</div>;
            });
    )
}

menu.js

import PopOut from "./popout.js"


import React from 'react'

export default function menu() {

const menuitems = [
{
    label: "Menu 1",
    children: [{ label: "Dashboard" }, { label: "item2" }],
}
{
    label: "Menu 2",
    children: [{ label: "People" }, { label: "item3" }],
}
{
    label: "Menu 3",
    children: [{ label: "Payments" }, { label: "item4" }],
}
];

    return (
        {
// here I want to click the menu and trigger the togglePopout function inside the component. 
    menuitems.map((item) => {
        <div onClick={()=>togglePopout()}>{item.label}</div>;
        {
         <Popout listItems={item.children}/>
            
        }
    });
}

    )
}

我想点击菜单并触发组件内部的togglePopout函数

非常感谢任何帮助

【问题讨论】：

标签： reactjs function components

【解决方案1】：

你不能用 react 那样做。 React 是声明性的，这意味着组件描述了在给定组件的状态和道具的情况下应该呈现的内容。您正在尝试做的是您将如何使用例如jQuery。您需要做的是将项目设置为组件状态并相应地呈现它。从处理程序返回 jsx 不会对组件的渲染输出做任何事情。

一个可能的解决方案是存储在 PopOut 内部，如果它应该显示它的孩子：

const menuItems = [
    {
        label: "Menu 1",
        children: [{ label: "Dashboard" }, { label: "item2" }],
    },
    {
        label: "Menu 2",
        children: [{ label: "People" }, { label: "item3" }],
    },
    {
        label: "Menu 3",
        children: [{ label: "Payments" }, { label: "item4" }],
    },
];

const PopOut = ({item}) => {
    const [isOpen, setIsOpen] = useState(false); // initially closed
    const toggle = () => setIsOpen(state => !state); // toggle open state 

    return (
        <div className="menu-item" onClick={toggle}>
            {item.label}
            {isOpen && item.children.map(child => (
                <div>{child.label}</div>
            ))}
        </div>
    );
}


const Menu = () => (
    <div className="menu">
        {menuItems.map(item => <PopOut item={item} />)}
    </div>
);

【讨论】：