你如何用反应钩子做点符号反应组件？

【问题标题】：how do you do dot notation react components with react hooks?你如何用反应钩子做点符号反应组件？
【发布时间】：2020-08-30 09:51:47
【问题描述】：

我看到一些库在 React 中使用点符号组件

例如

<Menu>
   <Menu.Item>Item 1</Menu.Item>
   <Menu.Item>Item 2</Menu.Item>
</Menu>

这是在类组件中使用静态关键字例如

const Item = () => ...code

class Menu extends Component {
  static Item = Item

  ...code

由于带有 React 钩子的功能组件不是类组件，这种模式仍然可以以某种方式与功能组件一起使用（例如访问原型或其他东西吗？）

这还能做吗？

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案1】：

这种模式称为复合组件。要将模式与功能组件一起使用，只需添加子组件 (Item) 作为主组件 (Menu) 的属性。

您可以在 Kent C. Dodds 文章 - React Hooks: Compound Components 中找到更多信息。

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

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

Menu.Item = Item;


ReactDOM.render(
  <Menu>
     <Menu.Item>Item 1</Menu.Item>
     <Menu.Item>Item 2</Menu.Item>
  </Menu>,
  root
);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

【讨论】：