组件内部的 React 触发函数

Question

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

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

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函数

一如既往，非常感谢任何帮助

Answer 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>
);

组件内部的 React 触发函数

React trigger function inside component

components

function

reactjs