React TypeScript - HTML 和 React 组件的子项

Question

我有一个 PopoverMenu 组件，我想在其中访问和使用 children 道具。我看过许多与此类似但不够相似的帖子，无法帮助我解决这个问题。

children 可以是标准 HTML 或其他 React 组件。

这是 PopoverMenu 组件：

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

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

...这是正在使用的组件...

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

...或者...

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

我已经为 children 尝试了多种类型，但我的 IDE 似乎对所有类型都不满。其中包括：

ReactNode

HTMLElement

ReactChildren

什么类型会给我想要的结果，为什么？

Answer 1

Children的类型应该是ReactNode。

但是你需要更正道具解构：它应该是({ children })。

此外，您需要 return else 块中的内容。如果不想显示任何内容，可以 return null.

React TypeScript - HTML 和 React 组件的子项

React TypeScript - children of HTML and React Components

typescript

reactjs

tsx