Reactjs React TypeScript-HTML和React组件的子级

我有一个

PopoverMenu

组件，我想在其中访问和使用

儿童

道具。我看到过很多类似的帖子，但都不足以帮助我解决这个问题

子项可以是标准HTML或其他组件

以下是
poovermenu
组件：

export const PopoverMenu = (children) =>
{
    const [visible, setVisible] = useState(true);

    if (visible) {
        return (
            <ul ref={ node } className="popover-menu">
                { children }
            </ul>
        )
    }
}

export const poovermenu=（子项）=>
{
const[visible，setVisible]=useState（true）；
如果（可见）{
返回(

{儿童}

)
}
}

…这是正在使用的组件

<PopoverMenu>
    <PopoverMenuItem>
      Edit
    </PopoverMenuItem>
    <PopoverMenuItem>
      Delete
    </PopoverMenuItem>
</PopoverMenu>


编辑
删除

……或者

<PopoverMenu>
    <li>
      <a>Edit</a>
    </li>
    <li>
      <a>Delete</a>
    </li>
</PopoverMenu>



编辑


删除


我为
儿童尝试了多种类型，但我的IDE似乎对所有类型都有抱怨。这些措施包括：

ReactNode

HTMLElement

子项

什么类型会给我想要的结果，为什么？
子类型应该是
ReactNode

但是您需要更正道具的解构：它应该是
（{children}）

此外，还需要从
else
块返回一些内容。如果您不想显示任何内容，可以
返回null
，这样在将我的代码更新为
（{children}:{children:ReactNode}）后，
当我尝试使用该组件时，我从IDE中得到的
'PopoverMenu'不能用作JSX组件。其返回类型“Element | undefined”不是有效的JSX元素。
似乎是React类型的良好集合。