javascript - 你如何做点符号 react 组件与 react Hook ？

Question

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

例如

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

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

const Item = () => ...code

class Menu extends Component {
  static Item = Item

  ...code

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

这还能做吗？

Answer 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>