React - 如何扩展具有子组件的组件并保留它们？

Question

我有 MyMenu 功能组件，它使用 antd Menu 水平变化：

import React  from 'react'
import {Menu} from 'antd'

function MyMenu() {
    return (
        <Menu
            mode={'horizontal'}
        >
            <Menu.Item key='Home'>Home</Menu.Item>
            <Menu.Item key='SignUp'>Sign up</Menu.Item>
        </Menu>
    )
}

现在，我想做的是创建一个默认使用 <Menu mode={'horizontal'}></Menu> 的 HorizontalMenu func.component。

我试过这样做：

function HorizontalMenu(props) {
    return (
        <Menu
            mode={'horizontal'}
        >
            {props.children}
        </Menu>
    )
}

function MyMenu() {
    return (
        <HorizontalMenu>
            <HorizontalMenu.Item key='Home'>Home</HorizontalMenu.Item>
            <HorizontalMenu.Item key='SignUp'>Sign up</HorizontalMenu.Item>
        </HorizontalMenu>
    )
}

但是菜单项永远不会被渲染..

编辑
在阅读了我自己的问题后，我想到我可以简单地做

HorizontalMenu.Item = Menu.Item

然后一切正常。
但这是正确的方式吗？

Answer 1

那是因为你没有声明 HorizontalMenu.Item 组件。您可以像这样在 HorizontalMenu 组件中简单地使用 Menu.Item 组件：

import React from "react";
import { Menu } from "antd";

function HorizontalMenu({ children, ...rest }) {
  return <Menu {...rest} mode="horizontal">{children}</Menu>;
}

function MyMenu() {
  return (
    <HorizontalMenu>
      <Menu.Item key="Home">Home</Menu.Item>
      <Menu.Item key="SignUp">Sign up</Menu.Item>
    </HorizontalMenu>
  );
}

但是，如果您想使用 HorizontalMenu.Item 组件。然后你必须定义那个组件：

import React from "react";
import { Menu } from "antd";

function HorizontalMenuItem({ children, ...rest }) {
  return <Menu.Item {...rest}>{children}</Menu.Item>;
}

class HorizontalMenu extends React.Component {
  // Allow it to be accessiable through HorizontalMenu.Item
  static Item = HorizontalMenuItem;

  render() {
    const { children, ...rest } = this.props;

    return (
      <Menu {...rest} mode="horizontal">
        {children}
      </Menu>
    );
  }
}

function MyMenu() {
  return (
    <HorizontalMenu>
      <HorizontalMenu.Item key="Home">Home</HorizontalMenu.Item>
      <HorizontalMenu.Item key="SignUp">Sign Up</HorizontalMenu.Item>
    </HorizontalMenu>
  );
}

请注意，我使用展开运算符 <Menu {...rest} mode="horizontal">，因此您仍然可以将任何其他可选道具传递给基础 Menu 组件。

希望对您有所帮助。

React - 如何扩展具有子组件的组件并保留它们？

React - how to extend a component that has child components and keep them?

javascript

reactjs

antd