javascript - 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>
    )
}

现在，我想做的是创建一个 HorizontalMenu将使用 <Menu mode={'horizontal'}></Menu> 的 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成分。您可以简单地使用Menu.Item HorizontalMenu 内的组件像这样的组件:

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组件。

希望这有帮助。