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 func.component，默认情况下将使用<Menu mode={'horizontal'}></Menu>。

我试过这样做：

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

希望这有帮助。

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

1 个答案: