如何为React功能组件实现JSX点符号？

Question

考虑用于React组件的JSX的此功能（点符号）：

JSX In Depth

但是对于类组件，我可以编写此类来调用类的静态方法并渲染子项prop：

import React, { Component } from 'react';

class Menu extends Component {
  static Item = ({ children }) => <li>{children}</li>;

  render() {
    return (
      <ul>{this.props.children}</ul>
    );
  }
}

并使用此类：

const App = () => (
  <Menu>
    <Menu.Item>Home</Menu.Item>
    <Menu.Item>Blog</Menu.Item>
    <Menu.Item>About</Menu.Item>
  </Menu>
);

但是对于功能组件这怎么可能？我该如何用Function而不用class编写它？

谢谢

Answer 1

首先，我没有看到您需要执行此操作的原因，但是这可能会起作用：

import React from 'react';

const Menu = ({ children }) => {
    return (
      <ul>{children}</ul>
    );
};

Menu.Item = ({ children }) => <li>{children}</li>;

这利用了一个事实，即函数是一个对象，并且它本身可以具有属性。